Karimaldeen/Zaker-Website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

format

Browse Source
This commit is contained in:
Moaz Dawalibi 2024-10-16 12:54:57 +03:00
parent 1fed61d66a
commit 9d623cad0c
50 changed files with 3599 additions and 2706 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

178
data.json
View File

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

6
index.html
View File

@ -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
rel="icon"
type="image/webp"
href="/ Setting/LOGO.png"
/>
<link rel="icon" type="image/webp" href="/ Setting/LOGO.png" />
<meta name="description" content=" description of your web app" />
<title>Website</title>
</head>

2142
pnpm-lock.yaml
View File

File diff suppressed because it is too large Load Diff

15
src/App.tsx
View File

@ -9,17 +9,16 @@ import VideoPage from './pages/VideoPage';
import ContactPage from './pages/ContactPage';
import './styles/App/index.scss';
const App = () => {
return (
<Layout>
<HomePage />
<FeaturesPage/>
<HowItWork/>
<VideoPage/>
<ScreenShoot/>
<NotePage/>
<DownloadPage/>
<ContactPage/>
<FeaturesPage />
<HowItWork />
<VideoPage />
<ScreenShoot />
<NotePage />
<DownloadPage />
<ContactPage />
</Layout>
);
};

4
src/Routes.tsx
View File

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

19
src/components/Contact/Left.tsx
View File

@ -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>
{ContactPageData.description}
</p>
<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;

39
src/components/Contact/Right.tsx
View File

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

15
src/components/Field/InputField.tsx
View File

@ -1,21 +1,16 @@
import { Input, InputProps } from "antd";
import React from "react";
import { Field } from "formik";
const InputField = ({
name,
...props
}: InputProps) => {
import { Input, InputProps } from 'antd';
import React from 'react';
import { Field } from 'formik';
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>

17
src/components/Field/TextAreaField.tsx
View File

@ -1,22 +1,17 @@
import { InputProps } from "antd";
import React from "react";
import { Field } from "formik";
import TextArea from "antd/es/input/TextArea";
const TextAreaField = ({
name,
...props
}: InputProps) => {
import { InputProps } from 'antd';
import React from 'react';
import { Field } from 'formik';
import TextArea from 'antd/es/input/TextArea';
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}
/>

13
src/components/SwiperScreenShoot.tsx
View File

@ -1,21 +1,19 @@
// Import Swiper React components
import { Pagination, A11y ,Autoplay} from 'swiper/modules';
import { Pagination, A11y, Autoplay } from 'swiper/modules';
import { Swiper, SwiperSlide } from 'swiper/react';
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;

2
src/components/layout/BackToTop.tsx
View File

@ -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 = () => {

28
src/components/layout/Footer.tsx
View File

@ -1,23 +1,21 @@
import { Input } from "antd";
import { FaFacebook, FaInstagram, FaTelegram, FaTwitter } from "react-icons/fa";
import {Footer as FooterData,Links,Setting} from '../../../data.json'
import { Input } from 'antd';
import { FaFacebook, FaInstagram, FaTelegram, FaTwitter } from 'react-icons/fa';
import { Footer as FooterData, Links, Setting } from '../../../data.json';
const Footer = () => {
const handleClick = (href:string)=>{
window.location.href = href
}
const handleClick = (href: string) => {
window.location.href = href;
};
return (
<div className="Footer">
<img loading="lazy" src={Setting.Logo} alt="logo" />
<div>
<FaTelegram onClick={()=>handleClick(Links.telegram)}/>
<FaFacebook onClick={()=>handleClick(Links.facebook)} />
<FaInstagram onClick={()=>handleClick(Links.instagram)} />
<FaTwitter onClick={()=>handleClick(Links.twitter)} />
<FaTelegram onClick={() => handleClick(Links.telegram)} />
<FaFacebook onClick={() => handleClick(Links.facebook)} />
<FaInstagram onClick={() => handleClick(Links.instagram)} />
<FaTwitter onClick={() => handleClick(Links.twitter)} />
</div>
<p>
{FooterData.privacy}
</p>
<p>{FooterData.privacy}</p>
<span className="FooterHeader">
<span>
<h1>{FooterData.title}</h1>
@ -26,12 +24,12 @@ const Footer = () => {
<div>
<Input placeholder="أدخل بريدك الإلكتروني" />
<div>
<FaTelegram/>
<FaTelegram />
</div>
</div>
</span>
</div>
)
);
};
export default Footer;

2
src/components/layout/Layout.tsx
View File

@ -9,7 +9,7 @@ const Layout = ({ children }: { children: React.ReactNode }) => {
<NavBar />
{children}
<Footer />
<BackToTopButton/>
<BackToTopButton />
</div>
);
};

71
src/components/layout/NavBar.tsx
View File

@ -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;
@ -19,63 +18,65 @@ const NavBar: React.FC = () => {
const links: NavLink[] = [
{ path: RoutesEnums.HOME, label: navBarData.link1 },
{ path: RoutesEnums.FEATURES, label: navBarData.link2 },
{ path: RoutesEnums.HOW_IT_WORK, label: navBarData.link3},
{ path: RoutesEnums.HOW_IT_WORK, label: navBarData.link3 },
{ path: RoutesEnums.SCREEN_SHOOT, label: navBarData.link4 },
{ path: RoutesEnums.NOTE, label:navBarData.link5 },
{ path: RoutesEnums.NOTE, label: navBarData.link5 },
{ path: RoutesEnums.CONTACT, label: navBarData.link6 },
];
const [Open, setOpen] = useState(false)
const handleToggle = ()=>{
setOpen(!Open)
}
const [Open, setOpen] = useState(false);
const handleToggle = () => {
setOpen(!Open);
};
const NavBarContent = (
<div className='NavBarContent'>
<ul className='NavBarLinks'>
{links.map((link) =>{
const NavBarContent = (
<div className="NavBarContent">
<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'>
<img loading="lazy" src={Setting.Logo} className='scale' alt="" />
<ul className='NavBarLinks'>
{links.map((link) =>{
const handleClick =()=>{
setActive(link.path)
}
const isActive = Active === "" && link.path === "#" ? true : Active === link.path;
<nav className="NavBar">
<img loading="lazy" src={Setting.Logo} className="scale" alt="" />
<ul className="NavBarLinks">
{links.map((link) => {
const handleClick = () => {
setActive(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>
<div>
<MdLanguage />
<article>
<Popover open={Open} content={NavBarContent} >
<Popover open={Open} content={NavBarContent}>
<FaEllipsis onClick={handleToggle} />
</Popover>
</article>
</div>
</nav>
);

4
src/components/layout/PageTransition.tsx
View File

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

3
src/components/layout/SpinContainer.tsx
View File

@ -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;

14
src/design-system/FirstLoading.tsx
View File

@ -5,7 +5,7 @@ interface FirstLoadingProps {
seconds: number;
children: React.ReactNode; // Add children prop
}
const FirstLoading: React.FC<FirstLoadingProps> = ({ seconds,children }) => {
const FirstLoading: React.FC<FirstLoadingProps> = ({ seconds, children }) => {
const [currentNumber, setCurrentNumber] = useState(1);
const [animate, setAnimate] = useState(false);
const [pageUp, setPageUp] = useState(false); // New state for page movement
@ -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="" />
<div className={`Info`}>
[{currentNumber} %]
<img loading="lazy" src={Logo} className="Logo" alt="" />
<div className={`Info`}>[{currentNumber} %]</div>
</div>
</div>
</div>
{
pageUp && children
}
{pageUp && children}
</>
);
};

2
src/enums/RoutesEnums.ts
View File

@ -5,4 +5,4 @@ export enum RoutesEnums {
SCREEN_SHOOT = '#screen_shoot',
NOTE = '#note',
CONTACT = '#contact_us',
}
}

3
src/lib/I18nProvider.tsx
View File

@ -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';

10
src/pages/AboutUs.tsx
View File

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

19
src/pages/ContactPage.tsx
View File

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

44
src/pages/DownloadPage.tsx
View File

@ -1,21 +1,19 @@
import { BsGooglePlay } from 'react-icons/bs'
import { FaApple } from 'react-icons/fa'
import {DownloadPage as DownloadPageData,Links} from '../../data.json'
import { BsGooglePlay } from 'react-icons/bs';
import { FaApple } from 'react-icons/fa';
import { DownloadPage as DownloadPageData, Links } from '../../data.json';
const DownloadPage = () => {
const handleClick = (href:string)=>{
window.location.href = href
}
const handleClick = (href: string) => {
window.location.href = href;
};
return (
<div className='DownloadPage' >
<div className="DownloadPage">
<main>
<h1> {DownloadPageData.title} </h1>
<p> {DownloadPageData.description} </p>
<div >
<button onClick={()=>handleClick(Links.google_play_link)}>
<div>
<button onClick={() => handleClick(Links.google_play_link)}>
<div>
<BsGooglePlay />
</div>
@ -24,7 +22,7 @@ const DownloadPage = () => {
<h5> {DownloadPageData.button1} </h5>
</div>
</button>
<button onClick={()=>handleClick(Links.apple_store_link)}>
<button onClick={() => handleClick(Links.apple_store_link)}>
<div>
<FaApple />
</div>
@ -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;

34
src/pages/FeaturesPage.tsx
View File

@ -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>
{item[1].title}
</h4>
<p>
{item[1].description}
</p>
<h4>{item[1].title}</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;

39
src/pages/HomePage.tsx
View File

@ -1,44 +1,45 @@
import { BsGooglePlay } from 'react-icons/bs'
import { FaApple } from 'react-icons/fa'
import {Home,Links} from '../../data.json'
import { BsGooglePlay } from 'react-icons/bs';
import { FaApple } from 'react-icons/fa';
import { Home, Links } from '../../data.json';
const HomePage = () => {
const handleClick = (href:string)=>{
window.location.href = href
}
const handleClick = (href: string) => {
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)}>
<button onClick={() => handleClick(Links.google_play_link)}>
<div>
<BsGooglePlay />
</div>
<div >
<div>
<h6>{Home.buttonLabel}</h6>
<h5> {Home.button1} </h5>
</div>
</button>
<button onClick={()=>handleClick(Links.apple_store_link)}>
<button onClick={() => handleClick(Links.apple_store_link)}>
<div>
<FaApple />
</div>
<div >
<div>
<h6>{Home.buttonLabel}</h6>
<h5> {Home.button2} </h5>
</div>
</button>
</div>
</main>
<img loading="lazy" className='circle' src="/Setting/circle.png" alt="" />
<img loading="lazy" className='shape' src="/Setting/shape.svg" alt="" />
<img loading="lazy" className='slider' src={Home.mainImage} 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="slider" src={Home.mainImage} alt="" />
</div>
)
}
);
};
export default HomePage
export default HomePage;

66
src/pages/HowItWork.tsx
View File

@ -1,54 +1,60 @@
import React from 'react'
import {HowItWork as HowItWorkData} from '../../data.json'
import React from 'react';
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>
{HowItWorkData.description}
</p>
<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>
{item[1].title}
</h4>
<p>
{item[1].description}
</p>
<h4>{item[1].title}</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>
{item[1].title}
</h4>
<p>
{item[1].description}
</p>
<h4>{item[1].title}</h4>
<p>{item[1].description}</p>
</div>
</article>
)
);
})}
</span>
</div>
</div>
)
}
);
};
export default HowItWork
export default HowItWork;

32
src/pages/NotePage.tsx
View File

@ -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>
{NotePageData.description}
</p>
<p>{NotePageData.description}</p>
<div>
{Object.entries(NotePageData.Data).map((item,index:number)=>{
{Object.entries(NotePageData.Data).map((item, index: number) => {
return (
<article key={index}>
<div>
<img className='message_form' src="/Note/message.png" alt="" width={20}/>
<p>
{item[1].description}
</p>
<img
className="message_form"
src="/Note/message.png"
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;

22
src/pages/ScreenShoot.tsx
View File

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

18
src/pages/VideoPage.tsx
View File

@ -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>
{VideoPageData.description}
</p>
<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>
);
};

19
src/styles/App/App.scss
View File

@ -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);
@ -22,7 +20,7 @@ body {
// line-height: normal;
// font-size: 16px;
}
p{
p {
font-weight: normal;
}
h1,
@ -68,20 +66,19 @@ input:-webkit-autofill:active {
box-shadow: inset 0 0 20px 20px #23232329;
}
button{
button {
cursor: pointer;
transition: .5s ease-in-out;
&:hover{
transition: 0.5s ease-in-out;
&:hover {
scale: 1.02;
}
}
svg,.scale{
svg,
.scale {
cursor: pointer;
transition: .5s ease-in-out;
&:hover{
transition: 0.5s ease-in-out;
&:hover {
scale: 1.1;
}
}

9
src/styles/App/Variables.scss
View File

@ -1,15 +1,14 @@
:root {
--primary: #222838;
--secondary: #fdba2d;
--thirdly:#0093d4;
--white:white;
--thirdly: #0093d4;
--white: white;
--text: #000;
--black:#000;
--black: #000;
--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) {

7
src/styles/App/classNames.scss
View File

@ -3,7 +3,7 @@
background-color: red;
}
.full-screen-center{
.full-screen-center {
position: absolute;
z-index: 999;
height: 100vh;
@ -11,9 +11,6 @@
display: flex;
align-items: center;
justify-content: center;
}
.spinner{
.spinner {
}

4
src/styles/components/FirstLoading.scss
View File

@ -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 {

65
src/styles/components/Footer.scss
View File

@ -1,4 +1,4 @@
.Footer{
.Footer {
background: var(--primary);
height: 350px;
display: flex;
@ -10,31 +10,29 @@
width: 100%;
z-index: 999;
position: relative;
img{
img {
width: 100px;
}
>div{
> div {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
svg{
svg {
font-size: 20px;
color: var(--white);
padding: 10px;
border: 1px solid var(--white);
border-radius: 50%;
}
}
p{
p {
font-size: 16px;
color: var(--white);
}
}
.FooterHeader{
.FooterHeader {
position: absolute;
top: -25%;
background: var(--thirdly);
@ -47,32 +45,32 @@
padding-inline: 5%;
color: var(--white);
border-radius: 6px;
>span{
> span {
display: flex;
flex-direction: column;
gap: 10px;
p{
p {
font-weight: normal;
}
}
>div{
> div {
background: var(--white);
width: 300px;
height: 40px;
display: flex;
padding: 5px;
gap: 10px;
.ant-input{
.ant-input {
border: none;
height: 40px;
all: unset;
min-width: 240px;
color: var(--text);
&::placeholder{
&::placeholder {
font-size: 10px;
}
}
div{
div {
background: var(--thirdly);
width: 50px;
display: flex;
@ -80,20 +78,16 @@
align-items: center;
border-radius: 5px;
cursor: pointer;
svg{
svg {
font-size: 30px;
width: 30px;
}
}
}
}
@media screen and (max-width:900px) {
.Footer{
@media screen and (max-width: 900px) {
.Footer {
background: var(--primary);
height: 330px;
display: flex;
@ -106,30 +100,28 @@
z-index: 999;
position: relative;
padding-bottom: 30px;
img{
img {
width: 100px;
}
>div{
> div {
display: flex;
align-items: center;
justify-content: center;
gap: 20px;
svg{
svg {
font-size: 20px;
color: var(--white);
padding: 10px;
border: 1px solid var(--white);
border-radius: 50%;
}
}
p{
p {
font-size: 14px;
}
}
.FooterHeader{
.FooterHeader {
position: absolute;
top: -40%;
background: var(--thirdly);
@ -144,36 +136,36 @@
padding-inline: 10%;
color: var(--white);
>span{
> span {
display: flex;
flex-direction: column;
gap: 10px;
h1{
h1 {
font-size: 20px;
}
p{
p {
font-size: 14px;
font-weight: normal;
}
}
>div{
> div {
background: var(--white);
width: 200px;
height: 40px;
display: flex;
padding: 5px;
gap: 10px;
.ant-input{
.ant-input {
border: none;
height: 40px;
all: unset;
min-width: 140px;
color: var(--text);
&::placeholder{
&::placeholder {
font-size: 10px;
}
}
div{
div {
background: var(--thirdly);
width: 50px;
display: flex;
@ -183,8 +175,5 @@
cursor: pointer;
}
}
}
}

3
src/styles/components/Layout.scss
View File

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

72
src/styles/components/NavBar.scss
View File

@ -1,111 +1,103 @@
.NavBar{
.NavBar {
background-color: var(--primary);
color: var(--white);
display: flex;
justify-content: space-between;
align-items: center;
padding: max(3vh,10px) max(50px,4vw);
padding: max(3vh, 10px) max(50px, 4vw);
position: fixed;
width: calc(100% - 100px);
z-index: 999999999;
font-size: max(20px , 1.5vw);
img,svg{
font-size: max(20px, 1.5vw);
img,
svg {
width: 60px;
font-size: 30px;
}
>ul{
> ul {
display: flex;
li{
li {
all: unset;
cursor: pointer;
transition: .5s ease-in-out;
&:hover{
transition: 0.5s ease-in-out;
&:hover {
scale: 1.1;
}
}
}
.NavBarLinks{
.NavBarLinks {
display: flex;
gap: max(20px,2vw);
gap: max(20px, 2vw);
a{
a {
color: var(--white) !important;
opacity: .6;
transition: .5s ease-in-out;
opacity: 0.6;
transition: 0.5s ease-in-out;
font-weight: normal;
font-size: 18px;
&:hover{
&:hover {
color: var(--secondary) !important;
scale: 1.1;
opacity: 1;
}
}
.activeLink{
a{
.activeLink {
a {
color: var(--thirdly) !important;
opacity: 1;
}
}
}
>div{
article{
&:nth-child(2){
> div {
article {
&:nth-child(2) {
display: none;
}
}
}
}
@media screen and (max-width:900px) {
.NavBar{
.NavBarLinks{
@media screen and (max-width: 900px) {
.NavBar {
.NavBarLinks {
display: none !important;
}
>div{
> div {
display: flex;
article{
&:nth-child(2){
article {
&:nth-child(2) {
display: block;
}
}
}
}
}
.NavBarContent{
.NavBarContent {
position: relative;
z-index: 9999999999;
background: var(--thirdly);
width: 150px;
min-height: 200px;
padding-top: 20px;
.NavBarLinks{
.NavBarLinks {
all: unset;
display: flex;
flex-direction: column;
width: 100%;
color: var(--white);
li{
li {
border-bottom: 1px solid var(--white);
padding: 10px;
&:last-child{
&:last-child {
border: none;
}
}
}
}
.ant-popover,.ant-popover-inner{
.ant-popover,
.ant-popover-inner {
padding: 0 !important;
z-index: 999;
margin-inline: 30px;
}

2
src/styles/components/PageTransition.scss
View File

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

2
src/styles/components/index.scss
View File

@ -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';

78
src/styles/pages/ContactPage.scss
View File

@ -1,4 +1,4 @@
.ContactPage{
.ContactPage {
background: var(--bg);
display: flex;
@ -7,76 +7,73 @@
width: 80%;
margin-bottom: 100px;
margin-inline: auto;
.Right{
.Right {
display: flex;
flex-direction: column;
gap: 10px;
.Forms{
.Forms {
display: flex;
flex-wrap: wrap;
gap: 1%;
max-width: 100%;
.ValidationField{
.ValidationField {
min-width: 48%;
margin-bottom: 20px;
.ant-input{
.ant-input {
min-height: 50px;
}
}
.TextAreaField{
.TextAreaField {
min-width: 97%;
}
}
button{
button {
all: unset;
padding: 14px 30px;
display: flex;
align-items: center;
gap: max(1vw,10px);
gap: max(1vw, 10px);
color: var(--white);
border: 1px solid var(--white);
border-radius: 7px;
// background-image: linear-gradient(45deg, #55B9E3, #5262E3);
background: var(--thirdly);
cursor: pointer;
transition: .5s ease-in-out;
&:hover{
transition: 0.5s ease-in-out;
&:hover {
scale: 1.1;
}
}
}
.Left{
.Left {
display: flex;
flex-direction: column;
gap: 20px;
min-width: 40vw;
p{
p {
color: var(--text);
}
>div{
> div {
display: flex;
flex-direction: column;
gap: 20px;
>span{
> span {
display: flex;
flex-direction: column;
gap: 2px;
>div{
> div {
display: flex;
align-items: center;
gap: 10px;
h6{
h6 {
font-size: 20px;
}
img{
img {
width: 18px;
}
}
p{
p {
font-size: 16px;
font-weight: normal;
}
@ -85,9 +82,8 @@
}
}
@media screen and (max-width:900px) {
.ContactPage{
@media screen and (max-width: 900px) {
.ContactPage {
background: var(--bg);
display: flex;
flex-direction: column;
@ -96,34 +92,32 @@
margin-block: 0 100px;
margin-inline: auto;
gap: 10px;
.Right{
.Right {
display: flex;
flex-direction: column;
gap: 20px;
.Forms{
.Forms {
display: flex;
flex-wrap: wrap;
gap: 1%;
max-width: 100%;
.ValidationField{
.ValidationField {
min-width: 100%;
margin-bottom: 20px;
.ant-input{
.ant-input {
min-height: 50px;
}
}
.TextAreaField{
.TextAreaField {
min-width: 100%;
}
}
button{
button {
all: unset;
padding: 14px 30px;
display: flex;
align-items: center;
gap: max(1vw,10px);
gap: max(1vw, 10px);
color: var(--white);
border: 1px solid var(--white);
border-radius: 7px;
@ -131,34 +125,33 @@
// background-image: linear-gradient(45deg, #55B9E3, #5262E3);
}
}
.Left{
.Left {
display: flex;
flex-direction: column;
gap: 20px;
p{
p {
color: var(--text);
}
>div{
> div {
display: flex;
flex-direction: column;
gap: 10px;
>span{
> span {
display: flex;
flex-direction: column;
gap: 0px;
>div{
> div {
display: flex;
align-items: center;
gap: 10px;
h6{
h6 {
font-size: 18px;
}
img{
img {
width: 15px;
}
}
p{
p {
font-size: 14px;
font-weight: normal;
}
@ -166,5 +159,4 @@
}
}
}
}

109
src/styles/pages/DownloadPage.scss
View File

@ -1,4 +1,4 @@
.DownloadPage{
.DownloadPage {
background: var(--bg);
display: flex;
gap: 50px;
@ -7,67 +7,64 @@
position: relative;
flex-direction: column;
>main{
> main {
position: relative;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
gap: max(2vh,25px);
gap: max(2vh, 25px);
text-align: center;
z-index: 99;
padding-top: 0px ;
>h1{
padding-top: 0px;
> h1 {
display: flex;
align-items: center;
gap: 20px;
color: var(--white);
font-size: max(4vw,50px);
font-size: max(4vw, 50px);
}
p{
p {
color: var(--white);
font-size: max(1.3vw,15px);
font-size: max(1.3vw, 15px);
width: 50%;
}
>div{
> div {
display: flex;
gap: max(1vw,10px);
button{
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);
gap: max(1vw, 10px);
color: var(--white);
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{
&:hover {
background: var(--thirdly);
scale: 1.1;
}
h6{
font-size: max(10px,1vw);
h6 {
font-size: max(10px, 1vw);
font-weight: normal;
line-height: 21px;
}
h5{
h5 {
font-weight: bold;
font-size: max(12px,1vw);
font-size: max(12px, 1vw);
line-height: 21px;
}
svg{
font-size: max(20px,1.3vw);
svg {
font-size: max(20px, 1.3vw);
}
}
}
}
>div{
> div {
position: absolute;
z-index: 1;
top: 0;
@ -75,31 +72,27 @@
height: 700px;
background: var(--primary);
overflow: hidden;
.circle{
.circle {
position: absolute;
width: 66%;
top: 0%;
left: 50%;
transform: translate(-50%,0%);
transform: translate(-50%, 0%);
z-index: 9999;
}
}
.main{
.main {
position: relative;
z-index: 99999;
// margin-top: 300px;
width: 80%;
object-fit: contain;
margin-inline: auto;
}
}
@media screen and (max-width:900px) {
.DownloadPage{
@media screen and (max-width: 900px) {
.DownloadPage {
background: var(--bg);
display: flex;
gap: 40px;
@ -108,58 +101,55 @@
position: relative;
flex-direction: column;
>main{
> main {
position: relative;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
gap: max(2vh,15px);
gap: max(2vh, 15px);
text-align: center;
z-index: 99;
padding-top: 50px ;
>h1{
padding-top: 50px;
> h1 {
display: flex;
align-items: center;
gap: 10px;
color: var(--white);
font-size: 6vw;
}
p{
p {
color: var(--white);
font-size: 4vw;
width: 80%;
}
>div{
> div {
display: flex;
gap: max(1vw,10px);
button{
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);
gap: max(1vw, 10px);
color: var(--white);
border: 1px solid var(--white);
border-radius: 10px;
cursor: pointer;
h6{
font-size: max(12px,1vw);
h6 {
font-size: max(12px, 1vw);
}
h5{
h5 {
font-weight: bold;
font-size: max(14px,1vw);
font-size: max(14px, 1vw);
}
svg{
font-size: max(20px,1.3vw);
svg {
font-size: max(20px, 1.3vw);
}
}
}
}
>div{
> div {
position: absolute;
z-index: 1;
top: 0;
@ -167,27 +157,22 @@
height: 630px;
background: var(--primary);
overflow: hidden;
.circle{
.circle {
position: absolute;
width: 800px;
top: 0%;
left: 50%;
transform: translate(-50%,0%);
transform: translate(-50%, 0%);
z-index: 1;
}
}
.main{
.main {
position: relative;
z-index: 3;
// margin-top: 300px;
width: 100%;
object-fit: contain;
margin-inline: auto;
}
}
}

65
src/styles/pages/FeaturesPage.scss
View File

@ -1,4 +1,4 @@
.FeaturesPage{
.FeaturesPage {
background: var(--bg);
display: flex;
flex-direction: column;
@ -7,11 +7,11 @@
gap: 20px;
width: 100%;
margin-bottom: 100px;
>h1{
> h1 {
font-size: 3vw;
color: #000;
}
>p{
> p {
font-weight: 500;
font-size: 1.2vw;
text-wrap: pretty;
@ -19,49 +19,47 @@
text-align: center;
color: var(--text);
}
>div{
> div {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
gap: 40px;
>img{
> img {
width: 400px;
}
>span{
> span {
display: flex;
flex-wrap: wrap;
max-width: 45%;
gap: 50px;
article{
article {
display: flex;
align-items: center;
gap: 20px;
max-width: 40%;
img{
img {
width: 55px;
object-fit: contain;
}
div{
h4{
font-size: max(1.2vw,16px);
div {
h4 {
font-size: max(1.2vw, 16px);
color: var(--black);
}
p{
p {
font-weight: normal;
font-size: max(.8vw,16px);
line-height:30px;
font-size: max(0.8vw, 16px);
line-height: 30px;
}
}
}
}
}
}
@media screen and (max-width:900px) {
.FeaturesPage{
@media screen and (max-width: 900px) {
.FeaturesPage {
background: var(--bg);
display: flex;
flex-direction: column;
@ -70,11 +68,11 @@
gap: 30px;
width: 100%;
margin-block: 50px;
>h1{
> h1 {
font-size: 8vw;
color: var(--text);
}
>p{
> p {
font-weight: 500;
font-size: 3vw;
text-wrap: pretty;
@ -82,49 +80,48 @@
text-align: center;
color: var(--text);
}
>div{
> div {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column-reverse;
width: 100%;
gap: 40px;
>img{
> img {
width: 300px;
}
>span{
display: flex;align-items: center;justify-content: center;
> span {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
width: 100% !important;
max-width: 90%;
gap: 50px;
article{
article {
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
gap: 20px;
max-width: 90% !important;
img{
img {
width: 50px;
object-fit: contain;
}
div{
div {
text-align: center;
h4{
font-size: max(1.2vw,16px);
h4 {
font-size: max(1.2vw, 16px);
}
p{
p {
font-weight: normal;
font-size: max(1vw,14px);
font-size: max(1vw, 14px);
}
}
}
}
}
}
}

132
src/styles/pages/HomePage.scss
View File

@ -1,74 +1,72 @@
.HomePage{
.HomePage {
min-height: 100vh;
background: var(--primary);
position: relative;
overflow: hidden;
margin-bottom: 20px;
>main{
> main {
position: relative;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin-top: max(12vh,120px);
gap:0px;
margin-top: max(12vh, 120px);
gap: 0px;
z-index: 99;
>h1{
> h1 {
display: flex;
align-items: center;
gap: 20px;
color: var(--white);
font-size: max(3vw,40px);
h2{
font-size: max(3vw, 40px);
h2 {
color: var(--secondary);
font-size: max(3vw,40px);
font-size: max(3vw, 40px);
}
}
p{
p {
color: var(--white);
font-size: max(1.5vw,15px);
font-size: max(1.5vw, 15px);
margin-bottom: 10px;
}
>div{
> div {
display: flex;
gap: max(1vw,10px);
button{
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);
gap: max(1vw, 10px);
color: var(--white);
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{
&:hover {
background: var(--thirdly);
scale: 1.1;
}
h6{
font-size: max(10px,1vw);
h6 {
font-size: max(10px, 1vw);
font-weight: normal;
line-height: 21px;
}
h5{
h5 {
font-weight: bold;
font-size: max(12px,1vw);
font-size: max(12px, 1vw);
line-height: 21px;
}
svg{
font-size: max(20px,1.3vw);
svg {
font-size: max(20px, 1.3vw);
}
}
}
}
.shape{
.shape {
position: absolute;
bottom: -18%;
width: 100%;
@ -76,40 +74,31 @@
min-height: 60vh;
object-fit: cover;
}
.circle{
.circle {
position: absolute;
width: 66%;
top: 73%;
left: 50%;
transform: translate(-50%,-50%);
transform: translate(-50%, -50%);
}
.slider{
.slider {
position: absolute;
width: 50%;
top: 74%;
left: 50%;
transform: translate(-50%,-50%);
transform: translate(-50%, -50%);
}
}
@media screen and (max-width:900px) {
.HomePage{
@media screen and (max-width: 900px) {
.HomePage {
min-height: 100vh;
background: var(--primary);
position: relative;
overflow: hidden;
padding-bottom: 120px;
>main{
> main {
position: relative;
width: 90%;
margin-inline: auto;
@ -117,93 +106,82 @@
flex-direction: column;
align-items: center;
justify-content: center;
margin-top: max(11vh,100px);
margin-top: max(11vh, 100px);
gap: 0px;
z-index: 99;
>h1{
> h1 {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 0px;
color: var(--white);
font-size: max(4vw,20px);
h2{
font-size: max(4vw, 20px);
h2 {
color: var(--secondary);
font-size: max(4vw,22px);
font-size: max(4vw, 22px);
}
}
p{
p {
color: var(--white);
font-size: max(3vw,14px);
font-size: max(3vw, 14px);
width: 94%;
text-align: center;
}
>div{
> div {
display: flex;
gap: max(1vw,10px);
button{
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);
gap: max(1vw, 10px);
color: var(--white);
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{
&:hover {
background: var(--thirdly);
scale: 1.1;
}
h6{
font-size: max(10px,1vw);
h6 {
font-size: max(10px, 1vw);
font-weight: normal;
line-height: 15px;
}
h5{
h5 {
font-weight: bold;
font-size: max(12px,1vw);
font-size: max(12px, 1vw);
line-height: 15px;
}
div:has(svg){
div:has(svg) {
display: flex;
justify-content: center;
align-items: center;
}
svg{
font-size: max(20px,1.3vw);
svg {
font-size: max(20px, 1.3vw);
}
}
}
}
.shape{
.shape {
display: none;
}
.circle{
.circle {
position: absolute;
width: 800px;
top: 500px;
}
.slider{
.slider {
position: absolute;
width: 600px;
top: 600px;
}
}
}

63
src/styles/pages/HowItWork.scss
View File

@ -1,4 +1,4 @@
.HowItWork{
.HowItWork {
background: var(--bg);
display: flex;
flex-direction: column;
@ -8,11 +8,11 @@
width: 100%;
margin-bottom: 100px;
>h1{
> h1 {
font-size: 3vw;
color: #000;
}
>p{
> p {
font-weight: 500;
font-size: 1.2vw;
text-wrap: pretty;
@ -20,17 +20,17 @@
text-align: center;
color: var(--text);
}
>div{
> div {
display: flex;
justify-content: center;
width: 80%;
gap: 40px;
margin-top: 40px;
>img{
> img {
width: 600px;
}
>span{
> span {
display: flex;
flex-direction: column;
justify-content: space-between;
@ -38,36 +38,33 @@
height: 100%;
gap: 100px;
padding-block: 10%;
article{
article {
display: flex;
align-items: center;
gap: 20px;
max-width: 100%;
img{
img {
width: 50px;
object-fit: contain;
}
div{
div {
width: 100% !important;
h4{
font-size: max(1.2vw,16px);
h4 {
font-size: max(1.2vw, 16px);
}
p{
p {
font-weight: normal;
font-size: max(1vw,14px);
font-size: max(1vw, 14px);
width: 100%;
}
}
}
}
}
}
@media screen and (max-width:900px) {
.HowItWork{
@media screen and (max-width: 900px) {
.HowItWork {
background: var(--bg);
display: flex;
flex-direction: column;
@ -77,11 +74,11 @@
width: 100%;
margin-block: 100px;
>h1{
> h1 {
font-size: 7vw;
color: var(--text);
}
>p{
> p {
font-weight: 500;
font-size: 3vw;
text-wrap: pretty;
@ -89,7 +86,7 @@
text-align: center;
color: var(--text);
}
>div{
> div {
display: flex;
justify-content: center;
flex-direction: column;
@ -97,12 +94,11 @@
width: 80%;
gap: 40px;
margin-top: 40px;
>img{
> img {
width: 300px;
order: 0;
}
>span{
> span {
order: 2;
display: flex;
flex-direction: column;
@ -112,34 +108,31 @@
gap: 20px;
padding-block: 0%;
article{
article {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 20px;
max-width: 100%;
background: var(--bg2);
padding:20px;
img{
padding: 20px;
img {
width: 50px;
object-fit: contain;
}
div{
div {
width: 80%;
h4{
font-size: max(1.2vw,16px);
h4 {
font-size: max(1.2vw, 16px);
}
p{
p {
font-weight: normal;
font-size: max(1vw,14px);
font-size: max(1vw, 14px);
width: 100%;
}
}
}
}
}
}
}

47
src/styles/pages/NotePage.scss
View File

@ -1,4 +1,4 @@
.NotePage{
.NotePage {
background: var(--bg2);
display: flex;
flex-direction: column;
@ -7,11 +7,11 @@
gap: 20px;
width: 100%;
padding-block: 100px;
>h1{
> h1 {
font-size: 3vw;
color: #000;
}
>p{
> p {
font-weight: 500;
font-size: 1.2vw;
text-wrap: pretty;
@ -20,46 +20,45 @@
color: var(--text);
}
>div{
> div {
display: flex;
justify-content: center;
align-items: center;
gap: 40px;
padding-block: 30px;
article{
article {
width: 40vw;
max-width: 450px;
display: flex;
flex-direction: column;
gap: 30px;
>div{
> div {
display: flex;
gap: 10px;
flex-direction: column;
padding: 30px 10px;
background: var(--bg);
position: relative;
.message_form{
.message_form {
position: absolute;
bottom: -10% ;
bottom: -10%;
}
}
>span{
> span {
display: flex;
align-items: center;
gap: 20px;
img{
img {
width: 50px;
}
}
}
}
}
}
@media screen and (max-width:900px) {
.NotePage{
@media screen and (max-width: 900px) {
.NotePage {
background: var(--bg2);
display: flex;
flex-direction: column;
@ -68,11 +67,11 @@
gap: 0px;
width: 100%;
padding-block: 50px;
>h1{
> h1 {
font-size: 5vw;
color: var(--text);
}
>p{
> p {
font-weight: 500;
font-size: 3vw;
text-wrap: pretty;
@ -81,7 +80,7 @@
color: var(--text);
}
>div{
> div {
display: flex;
justify-content: center;
align-items: center;
@ -89,34 +88,32 @@
width: 90%;
gap: 40px;
padding-block: 30px;
article{
article {
width: 100%;
display: flex;
flex-direction: column;
gap: 30px;
>div{
> div {
display: flex;
gap: 10px;
flex-direction: column;
padding: 30px 10px;
background: var(--bg);
position: relative;
.message_form{
.message_form {
position: absolute;
bottom: -8% ;
bottom: -8%;
}
}
>span{
> span {
display: flex;
align-items: center;
gap: 20px;
img{
img {
width: 50px;
}
}
}
}
}
}

49
src/styles/pages/ScreenShoot.scss
View File

@ -1,4 +1,4 @@
.ScreenShoot{
.ScreenShoot {
background: var(--bg);
display: flex;
flex-direction: column;
@ -9,11 +9,11 @@
margin-bottom: 100px;
position: relative;
>h1{
> h1 {
font-size: 3vw;
color: #000;
}
>p{
> p {
font-weight: 500;
font-size: 1.2vw;
text-wrap: pretty;
@ -21,32 +21,27 @@
text-align: center;
color: var(--text);
}
.SwipeScreenShoot{
.SwipeScreenShoot {
color: white;
width: 88%;
margin-inline: auto;
img{
img {
width: 250px;
margin-inline: auto;
}
}
}
.swiper-pagination-bullets.swiper-pagination-horizontal{
.swiper-pagination-bullets.swiper-pagination-horizontal {
transform: translateY(10px);
}
.swiper-slide{
.swiper-slide {
display: flex;
}
@media screen and (max-width:900px) {
.ScreenShoot{
@media screen and (max-width: 900px) {
.ScreenShoot {
background: var(--bg);
display: flex;
flex-direction: column;
@ -57,11 +52,11 @@
margin-block: 50px;
position: relative;
>h1{
> h1 {
font-size: 6vw;
color: var(--text);
}
>p{
> p {
font-weight: 500;
font-size: 12px;
text-wrap: pretty;
@ -70,26 +65,22 @@
color: var(--text);
margin-bottom: 20px;
}
.SwipeScreenShoot{
.SwipeScreenShoot {
color: white;
width: 80%;
margin-inline: auto;
img{
img {
width: 280px;
margin-inline: auto;
}
}
}
.swiper-pagination-bullets.swiper-pagination-horizontal {
transform: translateY(10px);
}
.swiper-slide {
display: flex;
}
}
.swiper-pagination-bullets.swiper-pagination-horizontal{
transform: translateY(10px);
}
.swiper-slide{
display: flex;
}
}

63
src/styles/pages/VideoPage.scss
View File

@ -1,4 +1,4 @@
.VideoPage{
.VideoPage {
background: var(--bg);
display: flex;
flex-direction: column;
@ -9,50 +9,47 @@
margin-bottom: 130px;
position: relative;
>img{
> img {
width: 100%;
object-fit: cover;
}
main{
main {
position: absolute;
top:30%;
top: 30%;
left: 50%;
transform: translate(-50%,-50%);
transform: translate(-50%, -50%);
color: var(--white);
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
// gap: 10px ;
h1{
h1 {
font-size: 3vw;
}
p{
p {
margin-bottom: 30px;
font-weight: normal;
}
img{
img {
width: 80px;
object-fit: contain;
cursor: pointer;
}
}
>span{
> span {
position: absolute;
bottom: -13%;
display: flex;
justify-content: space-around;
align-items: center;
background:var(--white);
background: var(--white);
border-radius: 10px;
width: 80%;
z-index: 99;
min-height: 230px;
article{
article {
display: flex;
flex-direction: column;
align-items: center;
@ -62,10 +59,8 @@
}
}
@media screen and (max-width:900px) {
.VideoPage{
@media screen and (max-width: 900px) {
.VideoPage {
background: var(--bg);
display: flex;
flex-direction: column;
@ -76,20 +71,17 @@
margin-bottom: 100px;
position: relative;
>img{
> img {
width: 100%;
height: 600px;
object-fit: cover;
}
main{
main {
position: absolute;
top:30%;
top: 30%;
left: 50%;
transform: translate(-50%,-50%);
transform: translate(-50%, -50%);
color: var(--white);
display: flex;
flex-direction: column;
@ -97,54 +89,51 @@
text-align: center;
gap: 0px;
width: 80%;
h1{
h1 {
font-size: 5vw;
}
p{
p {
font-weight: normal;
line-height: 30px;
font-size: 3vw;
}
img{
img {
width: 80px;
object-fit: contain;
cursor: pointer;
}
}
>span{
> span {
position: absolute;
bottom: -10%;
display: flex;
justify-content: space-around;
align-items: center;
flex-wrap: wrap;
background:var(--white);
background: var(--white);
border-radius: 10px;
width: 60%;
z-index: 99;
min-height: 200px;
padding: 40px 20px;
gap: 20px;
article{
article {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 10px;
min-width: 30%;
img{
img {
width: 30px;
}
h4{
h4 {
font-size: 16px;
}
p{
p {
font-size: 13px;
}
}
}
}
}

2
src/styles/pages/index.scss
View File

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

4
src/translate/ar.json
View File

@ -27,6 +27,6 @@
"Compatibility_with_all_devices_for_a_seamless_experience": "توافق مع جميع الأجهزة لضمان تجربة سلسة.",
"Creative_Design": "التصميم الإبداعي",
"Attractive_and_innovative_design_that_meets_your_needs": "تصميم جذاب وابتكاري يلبي احتياجاتك.",
"Providing_professional_value_objectively_with_varied_web_readiness_Collaborative_wireless_customer_service_without_targeted_incentives_for_change_Collaboration" :"تقديم قيمة احترافية بموضوعية مع جاهزية متنوعة للويب. نقل خدمة العملاء اللاسلكية بشكل تعاوني دون محفزات موجهة نحو الهدف للتغيير. التعاون.",
"Application_Features":"ميزات التطبيق"
"Providing_professional_value_objectively_with_varied_web_readiness_Collaborative_wireless_customer_service_without_targeted_incentives_for_change_Collaboration": "تقديم قيمة احترافية بموضوعية مع جاهزية متنوعة للويب. نقل خدمة العملاء اللاسلكية بشكل تعاوني دون محفزات موجهة نحو الهدف للتغيير. التعاون.",
"Application_Features": "ميزات التطبيق"
}

2
src/translate/en.json
View File

@ -23,5 +23,5 @@
"Attractive_and_innovative_design_that_meets_your_needs": "Attractive and innovative design that meets your needs.",
"Application_Features": "Features of the Application",
"Providing_professional_value_objectively_with_varied_web_readiness_Collaborative_wireless_customer_service_without_targeted_incentives_for_change_Collaboration": "Providing professional value objectively with diverse web readiness Transferring wireless customer service collaboratively without targeted incentives for change Collaboration",
"":""
"": ""
}

7
src/utils/index.tsx
View File

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