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

6
index.html
View File

@ -4,11 +4,7 @@
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="manifest" href="/site.webmanifest" /> <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" /> <meta name="description" content=" description of your web app" />
<title>Website</title> <title>Website</title>
</head> </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 ContactPage from './pages/ContactPage';
import './styles/App/index.scss'; import './styles/App/index.scss';
const App = () => { const App = () => {
return ( return (
<Layout> <Layout>
<HomePage /> <HomePage />
<FeaturesPage/> <FeaturesPage />
<HowItWork/> <HowItWork />
<VideoPage/> <VideoPage />
<ScreenShoot/> <ScreenShoot />
<NotePage/> <NotePage />
<DownloadPage/> <DownloadPage />
<ContactPage/> <ContactPage />
</Layout> </Layout>
); );
}; };

4
src/Routes.tsx
View File

@ -2,9 +2,7 @@ import './styles/App/index.scss';
import HomePage from './pages/HomePage'; import HomePage from './pages/HomePage';
const Routes = () => { const Routes = () => {
return ( return <HomePage />;
<HomePage />
);
}; };
export default Routes; 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 = () => { const Left = () => {
return ( return (
<div className='Left'> <div className="Left">
<h1> {ContactPageData.title} </h1> <h1> {ContactPageData.title} </h1>
<p> <p>{ContactPageData.description}</p>
{ContactPageData.description}
</p>
<div> <div>
{Object.entries(ContactPageData.Data)?.map((item, index) => { {Object.entries(ContactPageData.Data)?.map((item, index) => {
return ( return (
@ -18,13 +15,11 @@ const Left = () => {
</div> </div>
<p> {item[1].value} </p> <p> {item[1].value} </p>
</span> </span>
) );
})} })}
</div> </div>
</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 { 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 Right = () => {
const handleSubmit = ()=>{ const handleSubmit = () => {};
}
return ( return (
<div className='Right'> <div className="Right">
<h1>تواصل معنا بسرعة</h1> <h1>تواصل معنا بسرعة</h1>
<Formik initialValues={handleSubmit} onSubmit={handleSubmit} > <Formik initialValues={handleSubmit} onSubmit={handleSubmit}>
<Form> <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> </div>
<button className='scale' > <button className="scale">ارسل رسالة</button>
ارسل رسالة
</button>
</Form> </Form>
</Formik> </Formik>
</div> </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 { 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 ( return (
<div className="ValidationField w-100"> <div className="ValidationField w-100">
<Field <Field
as={Input} as={Input}
name={name} name={name}
id={name} id={name}
size="large" size="large"
styles={{width:"100%"}} styles={{ width: '100%' }}
{...props} {...props}
/> />
</div> </div>

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

@ -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 ( return (
<div className="ValidationField TextAreaField"> <div className="ValidationField TextAreaField">
<Field <Field
as={TextArea} as={TextArea}
name={name} name={name}
id={name} id={name}
size="large" size="large"
styles={{width:"100%"}} styles={{ width: '100%' }}
autoSize={{ minRows: 4, maxRows: 10 }} autoSize={{ minRows: 4, maxRows: 10 }}
{...props} {...props}
/> />

13
src/components/SwiperScreenShoot.tsx
View File

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

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

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

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

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

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

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

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

@ -1,13 +1,12 @@
// NavBar.tsx // NavBar.tsx
import React, { useState } from 'react'; import React, { useState } from 'react';
import { RoutesEnums } from '../../enums/RoutesEnums'; import { RoutesEnums } from '../../enums/RoutesEnums';
import { MdLanguage } from "react-icons/md"; import { MdLanguage } from 'react-icons/md';
import { FaEllipsis } from 'react-icons/fa6'; import { FaEllipsis } from 'react-icons/fa6';
import { Popover } from 'antd'; 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 an enum for the routes
// Define a type for the link objects // Define a type for the link objects
interface NavLink { interface NavLink {
path: RoutesEnums; path: RoutesEnums;
@ -19,63 +18,65 @@ const NavBar: React.FC = () => {
const links: NavLink[] = [ const links: NavLink[] = [
{ path: RoutesEnums.HOME, label: navBarData.link1 }, { path: RoutesEnums.HOME, label: navBarData.link1 },
{ path: RoutesEnums.FEATURES, label: navBarData.link2 }, { 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.SCREEN_SHOOT, label: navBarData.link4 },
{ path: RoutesEnums.NOTE, label:navBarData.link5 }, { path: RoutesEnums.NOTE, label: navBarData.link5 },
{ path: RoutesEnums.CONTACT, label: navBarData.link6 }, { path: RoutesEnums.CONTACT, label: navBarData.link6 },
]; ];
const [Open, setOpen] = useState(false) const [Open, setOpen] = useState(false);
const handleToggle = ()=>{ const handleToggle = () => {
setOpen(!Open) setOpen(!Open);
} };
const NavBarContent = (
const NavBarContent = ( <div className="NavBarContent">
<div className='NavBarContent'> <ul className="NavBarLinks">
<ul className='NavBarLinks'> {links.map((link) => {
{links.map((link) =>{
return ( return (
<li onClick={handleToggle} key={link.path} className={`${"activeLink"}`}> <li
onClick={handleToggle}
key={link.path}
className={`${'activeLink'}`}
>
<a href={link.path}>{link.label}</a> <a href={link.path}>{link.label}</a>
</li> </li>
) );
})} })}
</ul> </ul>
</div> </div>
); );
const [Active, setActive] = useState(location.hash);
const [Active, setActive] = useState(location.hash)
return ( 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) =>{ {links.map((link) => {
const handleClick = () => {
const handleClick =()=>{ setActive(link.path);
setActive(link.path) };
} const isActive =
const isActive = Active === "" && link.path === "#" ? true : Active === link.path; Active === '' && link.path === '#' ? true : Active === link.path;
return ( 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> <a href={link.path}>{link.label}</a>
</li> </li>
) );
})} })}
</ul> </ul>
<div> <div>
<MdLanguage /> <MdLanguage />
<article> <article>
<Popover open={Open} content={NavBarContent} > <Popover open={Open} content={NavBarContent}>
<FaEllipsis onClick={handleToggle} /> <FaEllipsis onClick={handleToggle} />
</Popover> </Popover>
</article> </article>
</div> </div>
</nav> </nav>
); );

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

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

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

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

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

@ -5,7 +5,7 @@ interface FirstLoadingProps {
seconds: number; seconds: number;
children: React.ReactNode; // Add children prop 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 [currentNumber, setCurrentNumber] = useState(1);
const [animate, setAnimate] = useState(false); const [animate, setAnimate] = useState(false);
const [pageUp, setPageUp] = useState(false); // New state for page movement 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 className={`FirstLoading ${pageUp ? 'PageUp' : ''}`}>
<div> <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> </div>
</div> {pageUp && children}
{
pageUp && children
}
</> </>
); );
}; };

2
src/enums/RoutesEnums.ts
View File

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

3
src/lib/I18nProvider.tsx
View File

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

10
src/pages/AboutUs.tsx
View File

@ -1,9 +1,7 @@
import React from 'react' import React from 'react';
const AboutUs = () => { const AboutUs = () => {
return ( return <div className="AboutUs">AboutUs</div>;
<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 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 = () => { const ContactPage = () => {
return ( return (
<div className='ContactPage' id='contact_us'> <div className="ContactPage" id="contact_us">
<Left/> <Left />
<Right/> <Right />
</div> </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 { 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 DownloadPage = () => {
const handleClick = (href: string) => {
const handleClick = (href:string)=>{ window.location.href = href;
window.location.href = href };
}
return ( return (
<div className='DownloadPage' > <div className="DownloadPage">
<main> <main>
<h1> {DownloadPageData.title} </h1> <h1> {DownloadPageData.title} </h1>
<p> {DownloadPageData.description} </p> <p> {DownloadPageData.description} </p>
<div > <div>
<button onClick={()=>handleClick(Links.google_play_link)}> <button onClick={() => handleClick(Links.google_play_link)}>
<div> <div>
<BsGooglePlay /> <BsGooglePlay />
</div> </div>
@ -24,7 +22,7 @@ const DownloadPage = () => {
<h5> {DownloadPageData.button1} </h5> <h5> {DownloadPageData.button1} </h5>
</div> </div>
</button> </button>
<button onClick={()=>handleClick(Links.apple_store_link)}> <button onClick={() => handleClick(Links.apple_store_link)}>
<div> <div>
<FaApple /> <FaApple />
</div> </div>
@ -37,14 +35,22 @@ const DownloadPage = () => {
</main> </main>
<div> <div>
<img loading="lazy" className='circle' src="/Setting/circle.png" alt="" /> <img
loading="lazy"
className="circle"
src="/Setting/circle.png"
alt=""
/>
</div> </div>
<img loading="lazy" className='main scale' src={DownloadPageData.img} alt="" /> <img
loading="lazy"
className="main scale"
src={DownloadPageData.img}
alt=""
/>
</div> </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 = () => { const FeaturesPage = () => {
console.log(); console.log();
return ( return (
<div className='FeaturesPage' id='features'> <div className="FeaturesPage" id="features">
<h1> {Features.title} </h1> <h1> {Features.title} </h1>
<p> {Features.description}</p> <p> {Features.description}</p>
<div> <div>
<span> <span>
{Object.entries(Features.Data).map((item, index) => { {Object.entries(Features.Data).map((item, index) => {
console.log(item,"item"); console.log(item, 'item');
return ( return (
<article key={index}> <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> <div>
<h4> <h4>{item[1].title}</h4>
{item[1].title} <p>{item[1].description}</p>
</h4>
<p>
{item[1].description}
</p>
</div> </div>
</article> </article>
) );
})} })}
</span> </span>
<img loading="lazy" className='scale' src={Features.mainImage} alt="" /> <img loading="lazy" className="scale" src={Features.mainImage} alt="" />
</div> </div>
</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 { 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 HomePage = () => {
const handleClick = (href: string) => {
const handleClick = (href:string)=>{ window.location.href = href;
window.location.href = href };
}
return ( return (
<div className='HomePage' id='#'> <div className="HomePage" id="#">
<main> <main>
<h1>{Home.title} <h2> {Home.ApplicationName} </h2></h1> <h1>
{Home.title} <h2> {Home.ApplicationName} </h2>
</h1>
<p>{Home.description}</p> <p>{Home.description}</p>
<div> <div>
<button onClick={()=>handleClick(Links.google_play_link)}> <button onClick={() => handleClick(Links.google_play_link)}>
<div> <div>
<BsGooglePlay /> <BsGooglePlay />
</div> </div>
<div > <div>
<h6>{Home.buttonLabel}</h6> <h6>{Home.buttonLabel}</h6>
<h5> {Home.button1} </h5> <h5> {Home.button1} </h5>
</div> </div>
</button> </button>
<button onClick={()=>handleClick(Links.apple_store_link)}> <button onClick={() => handleClick(Links.apple_store_link)}>
<div> <div>
<FaApple /> <FaApple />
</div> </div>
<div > <div>
<h6>{Home.buttonLabel}</h6> <h6>{Home.buttonLabel}</h6>
<h5> {Home.button2} </h5> <h5> {Home.button2} </h5>
</div> </div>
</button> </button>
</div> </div>
</main> </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> </div>
) );
} };
export default HomePage export default HomePage;

66
src/pages/HowItWork.tsx
View File

@ -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 = () => { const HowItWork = () => {
return ( return (
<div className='HowItWork' id='how_it_work'> <div className="HowItWork" id="how_it_work">
<h1> {HowItWorkData.title}</h1> <h1> {HowItWorkData.title}</h1>
<p> <p>{HowItWorkData.description}</p>
{HowItWorkData.description}
</p>
<div> <div>
<span> <span>
{Object.entries(HowItWorkData.Data).slice(0,2).map((item, index) => { {Object.entries(HowItWorkData.Data)
.slice(0, 2)
.map((item, index) => {
return ( return (
<article key={index}> <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> <div>
<h4> <h4>{item[1].title}</h4>
{item[1].title} <p>{item[1].description}</p>
</h4>
<p>
{item[1].description}
</p>
</div> </div>
</article> </article>
) );
})} })}
</span> </span>
<img loading="lazy" className='scale' src="/HowItWorks/main.png" alt="" /> <img
loading="lazy"
className="scale"
src="/HowItWorks/main.png"
alt=""
/>
<span> <span>
{Object.entries(HowItWorkData.Data).slice(2,4).map((item, index) => { {Object.entries(HowItWorkData.Data)
.slice(2, 4)
.map((item, index) => {
return ( return (
<article key={index}> <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> <div>
<h4> <h4>{item[1].title}</h4>
{item[1].title} <p>{item[1].description}</p>
</h4>
<p>
{item[1].description}
</p>
</div> </div>
</article> </article>
) );
})} })}
</span> </span>
</div> </div>
</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 { Rate } from 'antd';
import {NotePage as NotePageData} from '../../data.json' import { NotePage as NotePageData } from '../../data.json';
const NotePage = () => { const NotePage = () => {
return ( return (
<div className='NotePage' id='note' > <div className="NotePage" id="note">
<h1> {NotePageData.title} </h1> <h1> {NotePageData.title} </h1>
<p> <p>{NotePageData.description}</p>
{NotePageData.description}
</p>
<div> <div>
{Object.entries(NotePageData.Data).map((item,index:number)=>{ {Object.entries(NotePageData.Data).map((item, index: number) => {
return ( return (
<article key={index}> <article key={index}>
<div> <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} /> <Rate value={item[1].rate} />
</div> </div>
<span> <span>
@ -25,12 +26,11 @@ const NotePage = () => {
<h5> {item[1].name} </h5> <h5> {item[1].name} </h5>
</span> </span>
</article> </article>
);
)
})} })}
</div> </div>
</div> </div>
) );
} };
export default NotePage export default NotePage;

22
src/pages/ScreenShoot.tsx
View File

@ -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 = () => { const ScreenShoot = () => {
return ( return (
<div className='ScreenShoot' id='screen_shoot'> <div className="ScreenShoot" id="screen_shoot">
<h1> {ScreenShootData.title} </h1> <h1> {ScreenShootData.title} </h1>
<p> <p>{ScreenShootData.description}</p>
{ScreenShootData.description}
</p>
<SwipeScreenShoot/> <SwipeScreenShoot />
</div> </div>
) );
} };
export default ScreenShoot export default ScreenShoot;

18
src/pages/VideoPage.tsx
View File

@ -1,39 +1,37 @@
import React, { useState } from 'react'; import React, { useState } from 'react';
import {VideoPage as VideoPageData} from '../../data.json' import { VideoPage as VideoPageData } from '../../data.json';
const VideoPage = () => { const VideoPage = () => {
const [isPlaying, setIsPlaying] = useState(false); const [isPlaying, setIsPlaying] = useState(false);
const handlePlayPause = () => { const handlePlayPause = () => {
setIsPlaying(!isPlaying); setIsPlaying(!isPlaying);
}; };
return ( return (
<div className='VideoPage'> <div className="VideoPage">
<img loading="lazy" src="/Video/video.png" alt="" /> <img loading="lazy" src="/Video/video.png" alt="" />
<main> <main>
<h1>{VideoPageData.title}</h1> <h1>{VideoPageData.title}</h1>
<p> <p>{VideoPageData.description}</p>
{VideoPageData.description}
</p>
<img loading="lazy" src={VideoPageData.mainImage} alt="" /> <img loading="lazy" src={VideoPageData.mainImage} alt="" />
</main> </main>
<span> <span>
{Object.entries(VideoPageData.Data).map((item, index) => ( {Object.entries(VideoPageData.Data).map((item, index) => (
<article key={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> <h4>{item[1].number}</h4>
<p>{item[1].title}</p> <p>{item[1].title}</p>
</article> </article>
))} ))}
</span> </span>
</div> </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'); @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Arabic:wght@400;700&display=swap');
html, html,
body { body {
background: var(--bg); background: var(--bg);
@ -22,7 +20,7 @@ body {
// line-height: normal; // line-height: normal;
// font-size: 16px; // font-size: 16px;
} }
p{ p {
font-weight: normal; font-weight: normal;
} }
h1, h1,
@ -68,20 +66,19 @@ input:-webkit-autofill:active {
box-shadow: inset 0 0 20px 20px #23232329; box-shadow: inset 0 0 20px 20px #23232329;
} }
button {
button{
cursor: pointer; cursor: pointer;
transition: .5s ease-in-out; transition: 0.5s ease-in-out;
&:hover{ &:hover {
scale: 1.02; scale: 1.02;
} }
} }
svg,
svg,.scale{ .scale {
cursor: pointer; cursor: pointer;
transition: .5s ease-in-out; transition: 0.5s ease-in-out;
&:hover{ &:hover {
scale: 1.1; scale: 1.1;
} }
} }

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

@ -1,15 +1,14 @@
:root { :root {
--primary: #222838; --primary: #222838;
--secondary: #fdba2d; --secondary: #fdba2d;
--thirdly:#0093d4; --thirdly: #0093d4;
--white:white; --white: white;
--text: #000; --text: #000;
--black:#000; --black: #000;
--placeholder: rgb(0, 0, 0, 0.3); --placeholder: rgb(0, 0, 0, 0.3);
--bg: rgb(245 247 251); --bg: rgb(245 247 251);
--bg2: white; --bg2: white;
--gradient : linear-gradient(45deg, #55B9E3, #5262E3); --gradient: linear-gradient(45deg, #55b9e3, #5262e3);
} }
:root:has(.dark) { :root:has(.dark) {

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

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

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

@ -13,7 +13,9 @@
color: white; color: white;
z-index: 9999999999; z-index: 9999999999;
overflow: hidden; 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 { .Logo {

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -1,4 +1,4 @@
.FeaturesPage{ .FeaturesPage {
background: var(--bg); background: var(--bg);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -7,11 +7,11 @@
gap: 20px; gap: 20px;
width: 100%; width: 100%;
margin-bottom: 100px; margin-bottom: 100px;
>h1{ > h1 {
font-size: 3vw; font-size: 3vw;
color: #000; color: #000;
} }
>p{ > p {
font-weight: 500; font-weight: 500;
font-size: 1.2vw; font-size: 1.2vw;
text-wrap: pretty; text-wrap: pretty;
@ -19,49 +19,47 @@
text-align: center; text-align: center;
color: var(--text); color: var(--text);
} }
>div{ > div {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
width: 100%; width: 100%;
gap: 40px; gap: 40px;
>img{ > img {
width: 400px; width: 400px;
} }
>span{ > span {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
max-width: 45%; max-width: 45%;
gap: 50px; gap: 50px;
article{ article {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 20px; gap: 20px;
max-width: 40%; max-width: 40%;
img{ img {
width: 55px; width: 55px;
object-fit: contain; object-fit: contain;
} }
div{ div {
h4{ h4 {
font-size: max(1.2vw,16px); font-size: max(1.2vw, 16px);
color: var(--black); color: var(--black);
} }
p{ p {
font-weight: normal; font-weight: normal;
font-size: max(.8vw,16px); font-size: max(0.8vw, 16px);
line-height:30px; line-height: 30px;
} }
} }
} }
} }
} }
} }
@media screen and (max-width:900px) { @media screen and (max-width: 900px) {
.FeaturesPage{ .FeaturesPage {
background: var(--bg); background: var(--bg);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -70,11 +68,11 @@
gap: 30px; gap: 30px;
width: 100%; width: 100%;
margin-block: 50px; margin-block: 50px;
>h1{ > h1 {
font-size: 8vw; font-size: 8vw;
color: var(--text); color: var(--text);
} }
>p{ > p {
font-weight: 500; font-weight: 500;
font-size: 3vw; font-size: 3vw;
text-wrap: pretty; text-wrap: pretty;
@ -82,49 +80,48 @@
text-align: center; text-align: center;
color: var(--text); color: var(--text);
} }
>div{ > div {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
flex-direction: column-reverse; flex-direction: column-reverse;
width: 100%; width: 100%;
gap: 40px; gap: 40px;
>img{ > img {
width: 300px; width: 300px;
} }
>span{ > span {
display: flex;align-items: center;justify-content: center; display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap; flex-wrap: wrap;
width: 100% !important; width: 100% !important;
max-width: 90%; max-width: 90%;
gap: 50px; gap: 50px;
article{ article {
display: flex; display: flex;
align-items: center; align-items: center;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
gap: 20px; gap: 20px;
max-width: 90% !important; max-width: 90% !important;
img{ img {
width: 50px; width: 50px;
object-fit: contain; object-fit: contain;
} }
div{ div {
text-align: center; text-align: center;
h4{ h4 {
font-size: max(1.2vw,16px); font-size: max(1.2vw, 16px);
} }
p{ p {
font-weight: normal; 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; min-height: 100vh;
background: var(--primary); background: var(--primary);
position: relative; position: relative;
overflow: hidden; overflow: hidden;
margin-bottom: 20px; margin-bottom: 20px;
>main{ > main {
position: relative; position: relative;
width: 100%; width: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
margin-top: max(12vh,120px); margin-top: max(12vh, 120px);
gap:0px; gap: 0px;
z-index: 99; z-index: 99;
>h1{ > h1 {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 20px; gap: 20px;
color: var(--white); color: var(--white);
font-size: max(3vw,40px); font-size: max(3vw, 40px);
h2{ h2 {
color: var(--secondary); color: var(--secondary);
font-size: max(3vw,40px); font-size: max(3vw, 40px);
} }
} }
p{ p {
color: var(--white); color: var(--white);
font-size: max(1.5vw,15px); font-size: max(1.5vw, 15px);
margin-bottom: 10px; margin-bottom: 10px;
} }
>div{ > div {
display: flex; display: flex;
gap: max(1vw,10px); gap: max(1vw, 10px);
button{ button {
all: unset; all: unset;
padding: max(.5vw,8px) max(1.5vw,30px); padding: max(0.5vw, 8px) max(1.5vw, 30px);
display: flex; display: flex;
align-items: center; align-items: center;
gap: max(1vw,10px); gap: max(1vw, 10px);
color: var(--white); color: var(--white);
border: 1px solid var(--white); border: 1px solid var(--white);
border-radius: 10px; border-radius: 10px;
cursor: pointer; cursor: pointer;
transition: .5s ease-in-out; transition: 0.5s ease-in-out;
padding-block: 10px; padding-block: 10px;
&:hover{ &:hover {
background: var(--thirdly); background: var(--thirdly);
scale: 1.1; scale: 1.1;
} }
h6{ h6 {
font-size: max(10px,1vw); font-size: max(10px, 1vw);
font-weight: normal; font-weight: normal;
line-height: 21px; line-height: 21px;
} }
h5{ h5 {
font-weight: bold; font-weight: bold;
font-size: max(12px,1vw); font-size: max(12px, 1vw);
line-height: 21px; line-height: 21px;
} }
svg{ svg {
font-size: max(20px,1.3vw); font-size: max(20px, 1.3vw);
} }
} }
} }
} }
.shape{ .shape {
position: absolute; position: absolute;
bottom: -18%; bottom: -18%;
width: 100%; width: 100%;
@ -76,40 +74,31 @@
min-height: 60vh; min-height: 60vh;
object-fit: cover; object-fit: cover;
} }
.circle{ .circle {
position: absolute; position: absolute;
width: 66%; width: 66%;
top: 73%; top: 73%;
left: 50%; left: 50%;
transform: translate(-50%,-50%); transform: translate(-50%, -50%);
} }
.slider{ .slider {
position: absolute; position: absolute;
width: 50%; width: 50%;
top: 74%; top: 74%;
left: 50%; 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; min-height: 100vh;
background: var(--primary); background: var(--primary);
position: relative; position: relative;
overflow: hidden; overflow: hidden;
padding-bottom: 120px; padding-bottom: 120px;
>main{ > main {
position: relative; position: relative;
width: 90%; width: 90%;
margin-inline: auto; margin-inline: auto;
@ -117,93 +106,82 @@
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
margin-top: max(11vh,100px); margin-top: max(11vh, 100px);
gap: 0px; gap: 0px;
z-index: 99; z-index: 99;
>h1{ > h1 {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
gap: 0px; gap: 0px;
color: var(--white); color: var(--white);
font-size: max(4vw,20px); font-size: max(4vw, 20px);
h2{ h2 {
color: var(--secondary); color: var(--secondary);
font-size: max(4vw,22px); font-size: max(4vw, 22px);
} }
} }
p{ p {
color: var(--white); color: var(--white);
font-size: max(3vw,14px); font-size: max(3vw, 14px);
width: 94%; width: 94%;
text-align: center; text-align: center;
} }
>div{ > div {
display: flex; display: flex;
gap: max(1vw,10px); gap: max(1vw, 10px);
button{ button {
all: unset; all: unset;
padding: max(.5vw,8px) max(1.5vw,20px); padding: max(0.5vw, 8px) max(1.5vw, 20px);
display: flex; display: flex;
align-items: center; align-items: center;
gap: max(1vw,10px); gap: max(1vw, 10px);
color: var(--white); color: var(--white);
border: 1px solid var(--white); border: 1px solid var(--white);
border-radius: 10px; border-radius: 10px;
cursor: pointer; cursor: pointer;
transition: .5s ease-in-out; transition: 0.5s ease-in-out;
padding-block: 8px; padding-block: 8px;
// width: 90% !important; // width: 90% !important;
&:hover{ &:hover {
background: var(--thirdly); background: var(--thirdly);
scale: 1.1; scale: 1.1;
} }
h6{ h6 {
font-size: max(10px,1vw); font-size: max(10px, 1vw);
font-weight: normal; font-weight: normal;
line-height: 15px; line-height: 15px;
} }
h5{ h5 {
font-weight: bold; font-weight: bold;
font-size: max(12px,1vw); font-size: max(12px, 1vw);
line-height: 15px; line-height: 15px;
} }
div:has(svg){ div:has(svg) {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
svg{ svg {
font-size: max(20px,1.3vw); font-size: max(20px, 1.3vw);
} }
} }
} }
} }
.shape{ .shape {
display: none; display: none;
} }
.circle{ .circle {
position: absolute; position: absolute;
width: 800px; width: 800px;
top: 500px; top: 500px;
} }
.slider{ .slider {
position: absolute; position: absolute;
width: 600px; width: 600px;
top: 600px; top: 600px;
} }
} }
} }

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

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

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

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

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

@ -1,4 +1,4 @@
.ScreenShoot{ .ScreenShoot {
background: var(--bg); background: var(--bg);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -9,11 +9,11 @@
margin-bottom: 100px; margin-bottom: 100px;
position: relative; position: relative;
>h1{ > h1 {
font-size: 3vw; font-size: 3vw;
color: #000; color: #000;
} }
>p{ > p {
font-weight: 500; font-weight: 500;
font-size: 1.2vw; font-size: 1.2vw;
text-wrap: pretty; text-wrap: pretty;
@ -21,32 +21,27 @@
text-align: center; text-align: center;
color: var(--text); color: var(--text);
} }
.SwipeScreenShoot{ .SwipeScreenShoot {
color: white; color: white;
width: 88%; width: 88%;
margin-inline: auto; margin-inline: auto;
img{ img {
width: 250px; width: 250px;
margin-inline: auto; margin-inline: auto;
} }
} }
} }
.swiper-pagination-bullets.swiper-pagination-horizontal{ .swiper-pagination-bullets.swiper-pagination-horizontal {
transform: translateY(10px); transform: translateY(10px);
} }
.swiper-slide{ .swiper-slide {
display: flex; display: flex;
} }
@media screen and (max-width: 900px) {
.ScreenShoot {
@media screen and (max-width:900px) {
.ScreenShoot{
background: var(--bg); background: var(--bg);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -57,11 +52,11 @@
margin-block: 50px; margin-block: 50px;
position: relative; position: relative;
>h1{ > h1 {
font-size: 6vw; font-size: 6vw;
color: var(--text); color: var(--text);
} }
>p{ > p {
font-weight: 500; font-weight: 500;
font-size: 12px; font-size: 12px;
text-wrap: pretty; text-wrap: pretty;
@ -70,26 +65,22 @@
color: var(--text); color: var(--text);
margin-bottom: 20px; margin-bottom: 20px;
} }
.SwipeScreenShoot{ .SwipeScreenShoot {
color: white; color: white;
width: 80%; width: 80%;
margin-inline: auto; margin-inline: auto;
img{ img {
width: 280px; width: 280px;
margin-inline: auto; 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); background: var(--bg);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -9,50 +9,47 @@
margin-bottom: 130px; margin-bottom: 130px;
position: relative; position: relative;
>img{ > img {
width: 100%; width: 100%;
object-fit: cover; object-fit: cover;
} }
main {
main{
position: absolute; position: absolute;
top:30%; top: 30%;
left: 50%; left: 50%;
transform: translate(-50%,-50%); transform: translate(-50%, -50%);
color: var(--white); color: var(--white);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
text-align: center; text-align: center;
// gap: 10px ; // gap: 10px ;
h1{ h1 {
font-size: 3vw; font-size: 3vw;
} }
p{ p {
margin-bottom: 30px; margin-bottom: 30px;
font-weight: normal; font-weight: normal;
} }
img{ img {
width: 80px; width: 80px;
object-fit: contain; object-fit: contain;
cursor: pointer; cursor: pointer;
} }
} }
>span{ > span {
position: absolute; position: absolute;
bottom: -13%; bottom: -13%;
display: flex; display: flex;
justify-content: space-around; justify-content: space-around;
align-items: center; align-items: center;
background:var(--white); background: var(--white);
border-radius: 10px; border-radius: 10px;
width: 80%; width: 80%;
z-index: 99; z-index: 99;
min-height: 230px; min-height: 230px;
article{ article {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
@ -62,10 +59,8 @@
} }
} }
@media screen and (max-width: 900px) {
@media screen and (max-width:900px) { .VideoPage {
.VideoPage{
background: var(--bg); background: var(--bg);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -76,20 +71,17 @@
margin-bottom: 100px; margin-bottom: 100px;
position: relative; position: relative;
>img{ > img {
width: 100%; width: 100%;
height: 600px; height: 600px;
object-fit: cover; object-fit: cover;
} }
main {
main{
position: absolute; position: absolute;
top:30%; top: 30%;
left: 50%; left: 50%;
transform: translate(-50%,-50%); transform: translate(-50%, -50%);
color: var(--white); color: var(--white);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -97,54 +89,51 @@
text-align: center; text-align: center;
gap: 0px; gap: 0px;
width: 80%; width: 80%;
h1{ h1 {
font-size: 5vw; font-size: 5vw;
} }
p{ p {
font-weight: normal; font-weight: normal;
line-height: 30px; line-height: 30px;
font-size: 3vw; font-size: 3vw;
} }
img{ img {
width: 80px; width: 80px;
object-fit: contain; object-fit: contain;
cursor: pointer; cursor: pointer;
} }
} }
>span{ > span {
position: absolute; position: absolute;
bottom: -10%; bottom: -10%;
display: flex; display: flex;
justify-content: space-around; justify-content: space-around;
align-items: center; align-items: center;
flex-wrap: wrap; flex-wrap: wrap;
background:var(--white); background: var(--white);
border-radius: 10px; border-radius: 10px;
width: 60%; width: 60%;
z-index: 99; z-index: 99;
min-height: 200px; min-height: 200px;
padding: 40px 20px; padding: 40px 20px;
gap: 20px; gap: 20px;
article{ article {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
text-align: center; text-align: center;
gap: 10px; gap: 10px;
min-width: 30%; min-width: 30%;
img{ img {
width: 30px; width: 30px;
} }
h4{ h4 {
font-size: 16px; font-size: 16px;
} }
p{ p {
font-size: 13px; font-size: 13px;
} }
} }
} }
} }
} }

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

@ -5,4 +5,4 @@
@import './ScreenShoot.scss'; @import './ScreenShoot.scss';
@import './NotePage.scss'; @import './NotePage.scss';
@import './DownloadPage.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": "توافق مع جميع الأجهزة لضمان تجربة سلسة.", "Compatibility_with_all_devices_for_a_seamless_experience": "توافق مع جميع الأجهزة لضمان تجربة سلسة.",
"Creative_Design": "التصميم الإبداعي", "Creative_Design": "التصميم الإبداعي",
"Attractive_and_innovative_design_that_meets_your_needs": "تصميم جذاب وابتكاري يلبي احتياجاتك.", "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" :"تقديم قيمة احترافية بموضوعية مع جاهزية متنوعة للويب. نقل خدمة العملاء اللاسلكية بشكل تعاوني دون محفزات موجهة نحو الهدف للتغيير. التعاون.", "Providing_professional_value_objectively_with_varied_web_readiness_Collaborative_wireless_customer_service_without_targeted_incentives_for_change_Collaboration": "تقديم قيمة احترافية بموضوعية مع جاهزية متنوعة للويب. نقل خدمة العملاء اللاسلكية بشكل تعاوني دون محفزات موجهة نحو الهدف للتغيير. التعاون.",
"Application_Features":"ميزات التطبيق" "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.", "Attractive_and_innovative_design_that_meets_your_needs": "Attractive and innovative design that meets your needs.",
"Application_Features": "Features of the Application", "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", "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
}