make it static and make data in data.json
This commit is contained in:
karimaldeen
parent
8305cf9ff6
commit
5caadc1731
200
data.json
Normal file
200
data.json
Normal file
|
|
@ -0,0 +1,200 @@
|
|||
{
|
||||
"navBar":{
|
||||
"link1":"الرئيسية",
|
||||
"link2":"الميزات",
|
||||
"link3":"كيف يعمل",
|
||||
"link4":"لقطة الشاشة",
|
||||
"link5":"ملاحظة",
|
||||
"link6":"اتصل بنا"
|
||||
},
|
||||
"Home":{
|
||||
"title":"احصل على تنزيل مجاني لتطبيق",
|
||||
"ApplicationName":"Quiz",
|
||||
"description":"من الحقائق الثابتة منذ فترة طويلة أن القارئ سوف يصرف انتباهه عن المحتوى",
|
||||
"buttonLabel":"تحميل على المتجر",
|
||||
"button1":"جوجل بلاي",
|
||||
"button2":"ابل",
|
||||
"mainImage":"/Home/Main.png"
|
||||
},
|
||||
"Features":{
|
||||
"title":"ميزات غير محدودة",
|
||||
"description":"تقديم قيمة احترافية بموضوعية مع جاهزية متنوعة للويب. نقل خدمة العملاء اللاسلكية بشكل تعاوني دون محفزات موجهة نحو الهدف للتغيير. التعاون.",
|
||||
"mainImage":"/Features/main.png",
|
||||
"Data":{
|
||||
"1":{
|
||||
"img": "/Features/1.png",
|
||||
"title": "دعم ودود عبر الإنترنت",
|
||||
"description": "توفير دعم فني متاح على مدار الساعة لمساعدتك في أي استفسارات"
|
||||
},
|
||||
"2":{
|
||||
"img": "/Features/2.png",
|
||||
"title": "ميزات غير محدودة",
|
||||
"description": "استمتع بإمكانيات غير محدودة لتخصيص تجربتك"
|
||||
},
|
||||
"3": {
|
||||
"img": "/Features/3.png",
|
||||
"title": "مكون معياري وقابل للتبديل",
|
||||
"description": "تبديل بين التخطيطات وحتى العروض التوضيحية بسهولة"
|
||||
},
|
||||
"4": {
|
||||
"img": "/Features/4.png",
|
||||
"title": "دقة عالية",
|
||||
"description": "احصل على جودة صور وفيديو عالية الدقة"
|
||||
},
|
||||
"5": {
|
||||
"img": "/Features/5.png",
|
||||
"title": "مشاركة اجتماعية",
|
||||
"description": "سهولة مشاركة المحتوى عبر منصات التواصل الاجتماعي"
|
||||
},
|
||||
"6":{
|
||||
"img": "/Features/6.png",
|
||||
"title": "استخدم على أي جهاز",
|
||||
"description": "توافق مع جميع الأجهزة لضمان تجربة سلسة"
|
||||
}
|
||||
}
|
||||
},
|
||||
"HowItWork":{
|
||||
"title":"كيف يعمل؟ ",
|
||||
"description":" استضافة احترافية بسعر مناسب. تلخيص الكفاءات الأساسية التي تركز على المبدأ بشكل مميز من خلال الكفاءات الأساسية التي تركز على العميل.",
|
||||
"mainImage":"/HowItWorks/main.png",
|
||||
"Data":{
|
||||
"1":{
|
||||
"img": "/HowItWorks/1.png",
|
||||
"title": "دعم ودود عبر الإنترنت",
|
||||
"description": "توفير دعم فني متاح على مدار الساعة لمساعدتك في أي استفسارات"
|
||||
},
|
||||
"2": {
|
||||
"img": "/HowItWorks/2.png",
|
||||
"title": "دعم ودود عبر الإنترنت",
|
||||
"description": "توفير دعم فني متاح على مدار الساعة لمساعدتك في أي استفسارات"
|
||||
},
|
||||
"3": {
|
||||
"img": "/HowItWorks/3.png",
|
||||
"title": "دعم ودود عبر الإنترنت",
|
||||
"description": "توفير دعم فني متاح على مدار الساعة لمساعدتك في أي استفسارات"
|
||||
},
|
||||
"4": {
|
||||
"img": "/HowItWorks/4.png",
|
||||
"title": "دعم ودود عبر الإنترنت",
|
||||
"description": "توفير دعم فني متاح على مدار الساعة لمساعدتك في أي استفسارات"
|
||||
}
|
||||
}
|
||||
},
|
||||
"VideoPage":{
|
||||
"title":"منصة التطبيق الأكثر استخداما",
|
||||
"description":"ابدأ العمل مع ذلك الذي يمكن أن يوفر كل ما تحتاجه لتوليد الوعي وزيادة حركة المرور والتواصل. تحويل القيمة الدقيقة بكفاءة من خلال المحتوى الذي يركز على العميل.",
|
||||
"mainImage":"/Video/Play.png",
|
||||
"Data":{
|
||||
"1":{
|
||||
"img": "1",
|
||||
"title": "التصميم الإبداعي",
|
||||
"number": "1111"
|
||||
},
|
||||
"2":{
|
||||
"img": "2",
|
||||
"title": "التصميم الإبداعي",
|
||||
"number": "2222"
|
||||
},
|
||||
"3":{
|
||||
"img": "3",
|
||||
"title": "التصميم الإبداعي",
|
||||
"number": "3333"
|
||||
},
|
||||
"4":{
|
||||
"img": "4",
|
||||
"title": "التصميم الإبداعي",
|
||||
"number": "4444"
|
||||
}
|
||||
}
|
||||
},
|
||||
"ScreenShoot":{
|
||||
"title":"لقطات شاشة التطبيق",
|
||||
"description":"استضافة احترافية بسعر مناسب. تلخيص الكفاءات الأساسية التي تركز على المبدأ بشكل مميز من خلال الكفاءات الأساسية التي تركز على العميل",
|
||||
"Data":[
|
||||
"ScreenShoot/1.png",
|
||||
"ScreenShoot/1.png",
|
||||
"ScreenShoot/1.png",
|
||||
"ScreenShoot/1.png",
|
||||
"ScreenShoot/1.png",
|
||||
"ScreenShoot/1.png",
|
||||
"ScreenShoot/1.png",
|
||||
"ScreenShoot/1.png",
|
||||
"ScreenShoot/1.png",
|
||||
"ScreenShoot/1.png",
|
||||
"ScreenShoot/1.png"
|
||||
]
|
||||
},
|
||||
"NotePage":{
|
||||
"title":"ماذا يقول عملاؤنا عن ذاكر",
|
||||
"description":" استضافة احترافية بسعر مناسب. تلخيص الكفاءات الأساسية التي تركز على المبدأ بشكل مميز من خلال الكفاءات الأساسية التي تركز على العميل.",
|
||||
"Data":{
|
||||
"1":{
|
||||
"description":"تسهيل الضرورات الوظيفية بشكل جوهري بدون خدمات وصفية من الجيل التالي. إحداث ثورة مقنعة في المستخدمين في جميع أنحاء العالم مقابل أفضل ممارسات المؤسسة",
|
||||
"rate":4,
|
||||
"img":"/Note/1.png",
|
||||
"name":"إليسا اسكندر"
|
||||
|
||||
},
|
||||
"2":{
|
||||
"description":"تسهيل الضرورات الوظيفية بشكل جوهري بدون خدمات وصفية من الجيل التالي. إحداث ثورة مقنعة في المستخدمين في جميع أنحاء العالم مقابل أفضل ممارسات المؤسسة",
|
||||
"rate":4,
|
||||
"img":"/Note/1.png",
|
||||
"name":"إليسا اسكندر"
|
||||
|
||||
},
|
||||
"3":{
|
||||
"description":"تسهيل الضرورات الوظيفية بشكل جوهري بدون خدمات وصفية من الجيل التالي. إحداث ثورة مقنعة في المستخدمين في جميع أنحاء العالم مقابل أفضل ممارسات المؤسسة",
|
||||
"rate":4,
|
||||
"img":"/Note/1.png",
|
||||
"name":"إليسا اسكندر"
|
||||
|
||||
}
|
||||
}
|
||||
},
|
||||
"DownloadPage":{
|
||||
"title":"متوفر الآن على",
|
||||
"description":"ابدأ العمل مع ذلك الذي يمكن أن يوفر كل ما تحتاجه لتوليد الوعي وزيادة حركة المرور والتواصل. تحويل القيمة الدقيقة بكفاءة من خلال المحتوى الذي يركز على العميل",
|
||||
"buttonLabel":"تحميل على المتجر",
|
||||
"button1":"جوجل بلاي",
|
||||
"button2":"المتجر",
|
||||
"img":"/Download/1.png"
|
||||
},
|
||||
"ContactPage":{
|
||||
"title":"تواصل معنا",
|
||||
"description":"من السهل جدا الاتصال بنا. ما عليك سوى استخدام نموذج الاتصال أو زيارتنا في المكتب. ابتكار التكنولوجيا التنافسية ديناميكيا بعد مجموعة موسعة من القيادة",
|
||||
"Data":{
|
||||
"1": {
|
||||
"title": "المكتب الرئيسي",
|
||||
"image": "/contact/1.png",
|
||||
"value": "121 King St , ملبورن VIC 3000, أستراليا"
|
||||
},
|
||||
"2":{
|
||||
"title": "المكتب الرئيسي",
|
||||
"image": "/contact/2.png",
|
||||
"value": "121 King St , ملبورن VIC 3000, أستراليا"
|
||||
},
|
||||
"3":{
|
||||
"title": "المكتب الرئيسي",
|
||||
"image": "/contact/3.png",
|
||||
"value": "121 King St , ملبورن VIC 3000, أستراليا"
|
||||
}
|
||||
}
|
||||
},
|
||||
"Footer":{
|
||||
"title":"اشترك في نشرتنا الإخبارية",
|
||||
"description":"نحن فريق من غير المتشائمين الذين يهتمون حقا بعملنا",
|
||||
"privacy":"© زاكر 2024.جميع الحقوق محفوظة"
|
||||
|
||||
},
|
||||
"Links":{
|
||||
"google_play_link":"/",
|
||||
"apple_store_link":"/",
|
||||
"facebook":"/",
|
||||
"telegram":"/",
|
||||
"instagram":"/",
|
||||
"twitter":"/"
|
||||
},
|
||||
"Settting":{
|
||||
"Logo":"/LOGO.png"
|
||||
}
|
||||
}
|
||||
|
Before Width: | Height: | Size: 197 KiB After Width: | Height: | Size: 197 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 202 KiB |
|
Before Width: | Height: | Size: 37 KiB After Width: | Height: | Size: 37 KiB |
|
Before Width: | Height: | Size: 3.0 KiB After Width: | Height: | Size: 3.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 45 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 47 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 43 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 97 KiB |
|
|
@ -1 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
|
||||
|
Before Width: | Height: | Size: 1.5 KiB |
|
|
@ -1,32 +1,9 @@
|
|||
import { lazy, Suspense } from 'react';
|
||||
import { Route, Routes as RoutesContainer } from 'react-router-dom';
|
||||
import './styles/App/index.scss';
|
||||
import SpinContainer from './components/layout/SpinContainer';
|
||||
import HomePage from './pages/HomePage';
|
||||
import Layout from './components/layout/Layout';
|
||||
import { RoutesEnums } from './enums/RoutesEnums';
|
||||
const Page404 = lazy(() => import('./components/layout/NotFoundPage'));
|
||||
|
||||
const Routes = () => {
|
||||
return (
|
||||
<RoutesContainer>
|
||||
<Route
|
||||
path={RoutesEnums.HOME}
|
||||
element={
|
||||
<Layout>
|
||||
<HomePage />
|
||||
</Layout>
|
||||
}
|
||||
/>
|
||||
<Route
|
||||
path={'/*'}
|
||||
element={
|
||||
<Suspense fallback={<SpinContainer />}>
|
||||
<Page404 />
|
||||
</Suspense>
|
||||
}
|
||||
/>
|
||||
</RoutesContainer>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -1,38 +1,23 @@
|
|||
import React from 'react'
|
||||
import {ContactPage as ContactPageData} from '../../../data.json'
|
||||
|
||||
const Left = () => {
|
||||
const Left = [
|
||||
{
|
||||
title: "المكتب الرئيسي",
|
||||
image: "/contact/1.png",
|
||||
value: "121 King St , ملبورن VIC 3000, أستراليا"
|
||||
},
|
||||
{
|
||||
title: "المكتب الرئيسي",
|
||||
image: "/contact/2.png",
|
||||
value: "121 King St , ملبورن VIC 3000, أستراليا"
|
||||
},
|
||||
{
|
||||
title: "المكتب الرئيسي",
|
||||
image: "/contact/3.png",
|
||||
value: "121 King St , ملبورن VIC 3000, أستراليا"
|
||||
}
|
||||
]
|
||||
|
||||
return (
|
||||
<div className='Left'>
|
||||
<h1> تواصل معنا </h1>
|
||||
<h1> {ContactPageData.title} </h1>
|
||||
<p>
|
||||
من السهل جدا الاتصال بنا. ما عليك سوى استخدام نموذج الاتصال أو زيارتنا في المكتب. ابتكار التكنولوجيا التنافسية ديناميكيا بعد مجموعة موسعة من القيادة.
|
||||
{ContactPageData.description}
|
||||
</p>
|
||||
<div>
|
||||
{Left?.map((item, index) => {
|
||||
{Object.entries(ContactPageData.Data)?.map((item, index) => {
|
||||
return (
|
||||
<span key={index}>
|
||||
<div>
|
||||
<img src={item.image} alt="" />
|
||||
<h6> {item.title} </h6>
|
||||
<img src={item[1].image} alt="" />
|
||||
<h6> {item[1].title} </h6>
|
||||
</div>
|
||||
<p> {item.value} </p>
|
||||
<p> {item[1].value} </p>
|
||||
</span>
|
||||
)
|
||||
})}
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@ import 'swiper/css';
|
|||
import 'swiper/css/navigation';
|
||||
import 'swiper/css/pagination';
|
||||
import 'swiper/css/scrollbar';
|
||||
import {ScreenShoot as ScreenShootData} from '../../data.json'
|
||||
|
||||
const SwipeScreenShoot = () => {
|
||||
const SwipeScreenShoot = [
|
||||
|
|
@ -54,11 +55,14 @@ const SwipeScreenShoot = () => {
|
|||
},
|
||||
}}
|
||||
>
|
||||
{SwipeScreenShoot.map((item, index) => (
|
||||
{ScreenShootData.Data.map((item, index) => {
|
||||
|
||||
return (
|
||||
<SwiperSlide key={index}>
|
||||
<img src={item.image} alt={`Screenshot ${index + 1}`} />
|
||||
<img src={item} alt={`Screenshot ${index + 1}`} />
|
||||
</SwiperSlide>
|
||||
))}
|
||||
)
|
||||
})}
|
||||
</Swiper>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,23 +1,27 @@
|
|||
import { Input } from "antd";
|
||||
import { FaFacebook, FaInstagram, FaTelegram, FaTwitter } from "react-icons/fa";
|
||||
import {Footer as FooterData,Links} from '../../../data.json'
|
||||
|
||||
const Footer = () => {
|
||||
const handleClick = (href:string)=>{
|
||||
window.location.href = href
|
||||
}
|
||||
return (
|
||||
<div className="Footer">
|
||||
<img src="/LOGO.png" alt="logo" />
|
||||
<div>
|
||||
<FaTelegram/>
|
||||
<FaFacebook/>
|
||||
<FaInstagram/>
|
||||
<FaTwitter/>
|
||||
<FaTelegram onClick={()=>handleClick(Links.telegram)}/>
|
||||
<FaFacebook onClick={()=>handleClick(Links.facebook)} />
|
||||
<FaInstagram onClick={()=>handleClick(Links.instagram)} />
|
||||
<FaTwitter onClick={()=>handleClick(Links.twitter)} />
|
||||
</div>
|
||||
<p>
|
||||
© زاكر 2024.جميع الحقوق محفوظة
|
||||
{FooterData.privacy}
|
||||
</p>
|
||||
<span className="FooterHeader">
|
||||
<span>
|
||||
<h1>اشترك في نشرتنا الإخبارية</h1>
|
||||
<p>نحن فريق من غير المتشائمين الذين يهتمون حقا بعملنا.</p>
|
||||
<h1>{FooterData.title}</h1>
|
||||
<p>{FooterData.description}</p>
|
||||
</span>
|
||||
<div>
|
||||
<Input placeholder="أدخل بريدك الإلكتروني" />
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ import { useTranslation } from 'react-i18next';
|
|||
import { MdLanguage } from "react-icons/md";
|
||||
import { FaEllipsis } from 'react-icons/fa6';
|
||||
import { Popover } from 'antd';
|
||||
|
||||
import {navBar as navBarData,Settting} from '../../../data.json'
|
||||
// Define an enum for the routes
|
||||
|
||||
|
||||
|
|
@ -19,12 +19,12 @@ const NavBar: React.FC = () => {
|
|||
// Define an array of link objects using the RoutesEnums
|
||||
const [t] = useTranslation()
|
||||
const links: NavLink[] = [
|
||||
{ path: RoutesEnums.HOME, label: t('home') },
|
||||
{ path: RoutesEnums.FEATURES, label: t('features') },
|
||||
{ path: RoutesEnums.HOW_IT_WORK, label: t('how_it_work') },
|
||||
{ path: RoutesEnums.SCREEN_SHOOT, label: t('screen_shoot') },
|
||||
{ path: RoutesEnums.NOTE, label: t('note') },
|
||||
{ path: RoutesEnums.CONTACT, label: t('contact_us') },
|
||||
{ path: RoutesEnums.HOME, label: navBarData.link1 },
|
||||
{ path: RoutesEnums.FEATURES, label: navBarData.link2 },
|
||||
{ path: RoutesEnums.HOW_IT_WORK, label: navBarData.link3},
|
||||
{ path: RoutesEnums.SCREEN_SHOOT, label: navBarData.link4 },
|
||||
{ path: RoutesEnums.NOTE, label:navBarData.link5 },
|
||||
{ path: RoutesEnums.CONTACT, label: navBarData.link6 },
|
||||
];
|
||||
const [Open, setOpen] = useState(false)
|
||||
const handleToggle = ()=>{
|
||||
|
|
@ -54,7 +54,7 @@ const NavBarContent = (
|
|||
|
||||
return (
|
||||
<nav className='NavBar'>
|
||||
<img src="/LOGO.png" className='scale' alt="" />
|
||||
<img src={Settting.Logo} className='scale' alt="" />
|
||||
<ul className='NavBarLinks'>
|
||||
{links.map((link) =>{
|
||||
|
||||
|
|
|
|||
|
|
@ -1,33 +1,36 @@
|
|||
import React from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { BsGooglePlay } from 'react-icons/bs'
|
||||
import { FaApple } from 'react-icons/fa'
|
||||
import {DownloadPage as DownloadPageData,Links} from '../../data.json'
|
||||
|
||||
const DownloadPage = () => {
|
||||
const { t } = useTranslation()
|
||||
|
||||
const handleClick = (href:string)=>{
|
||||
window.location.href = href
|
||||
}
|
||||
|
||||
|
||||
return (
|
||||
<div className='DownloadPage' >
|
||||
<main>
|
||||
<h1>متوفر الآن على</h1>
|
||||
<p>ابدأ العمل مع ذلك الذي يمكن أن يوفر كل ما تحتاجه لتوليد الوعي وزيادة حركة المرور والتواصل. تحويل القيمة الدقيقة بكفاءة من خلال المحتوى الذي يركز على العميل.</p>
|
||||
<h1> {DownloadPageData.title} </h1>
|
||||
<p> {DownloadPageData.description} </p>
|
||||
<div >
|
||||
<button>
|
||||
<button onClick={()=>handleClick(Links.google_play_link)}>
|
||||
<div>
|
||||
<BsGooglePlay />
|
||||
</div>
|
||||
<div>
|
||||
<h6>{t('download_on')}</h6>
|
||||
<h5>{t('play_store')}</h5>
|
||||
<h6>{DownloadPageData.buttonLabel}</h6>
|
||||
<h5> {DownloadPageData.button1} </h5>
|
||||
</div>
|
||||
</button>
|
||||
<button>
|
||||
<button onClick={()=>handleClick(Links.apple_store_link)}>
|
||||
<div>
|
||||
<FaApple />
|
||||
</div>
|
||||
<div>
|
||||
<h6>{t('available_on')}</h6>
|
||||
<h5>{t('google_play')}</h5>
|
||||
<h6>{DownloadPageData.buttonLabel}</h6>
|
||||
<h5> {DownloadPageData.button2} </h5>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
|
|
@ -38,7 +41,7 @@ const DownloadPage = () => {
|
|||
|
||||
</div>
|
||||
|
||||
<img className='main scale' src="/Download/1.png" alt="" />
|
||||
<img className='main scale' src={DownloadPageData.img} alt="" />
|
||||
</div>
|
||||
|
||||
)
|
||||
|
|
|
|||
|
|
@ -1,56 +1,29 @@
|
|||
import { useTranslation } from 'react-i18next'
|
||||
import {Features} from '../../data.json'
|
||||
|
||||
const FeaturesPage = () => {
|
||||
|
||||
const features = [
|
||||
{
|
||||
"img": "1",
|
||||
"title": "Friendly_Online_Support",
|
||||
"description": "Providing_round_the_clock_technical_support_to_assist_you_with_any_inquiries"
|
||||
},
|
||||
{
|
||||
"img": "2",
|
||||
"title": "Unlimited_Features",
|
||||
"description": "Enjoy_limitless_possibilities_to_customize_your_experience"
|
||||
},
|
||||
{
|
||||
"img": "3",
|
||||
"title": "Modular_and_Switchable_Component",
|
||||
"description": "Easily_switch_between_layouts_and_even_demos"
|
||||
},
|
||||
{
|
||||
"img": "4",
|
||||
"title": "High_Resolution",
|
||||
"description": "Get_high_quality_images_and_videos"
|
||||
},
|
||||
{
|
||||
"img": "5",
|
||||
"title": "Social_Sharing",
|
||||
"description": "Easily_share_content_across_social_media_platforms"
|
||||
},
|
||||
{
|
||||
"img": "6",
|
||||
"title": "Use_on_Any_Device",
|
||||
"description": "Compatibility_with_all_devices_for_a_seamless_experience"
|
||||
}
|
||||
]
|
||||
const [t] = useTranslation()
|
||||
console.log();
|
||||
|
||||
return (
|
||||
<div className='FeaturesPage' id='features'>
|
||||
<h1> {t("Application_Features")} </h1>
|
||||
<p> {t("Providing_professional_value_objectively_with_varied_web_readiness_Collaborative_wireless_customer_service_without_targeted_incentives_for_change_Collaboration")} </p>
|
||||
<h1> {Features.title} </h1>
|
||||
<p> {Features.description}</p>
|
||||
<div>
|
||||
<span>
|
||||
{features.map((item, index) => {
|
||||
{Object.entries(Features.Data).map((item, index) => {
|
||||
console.log(item,"item");
|
||||
|
||||
return (
|
||||
<article key={index}>
|
||||
<img className='scale' src={`/Features/${item.img}.png`} alt={`${index}`} />
|
||||
<img className='scale' src={item[1].img} alt={`${index}`} />
|
||||
<div>
|
||||
<h4>
|
||||
{t(item.title)}
|
||||
{t(item[1].title)}
|
||||
</h4>
|
||||
<p>
|
||||
{t(item.description)}
|
||||
{t(item[1].description)}
|
||||
</p>
|
||||
</div>
|
||||
</article>
|
||||
|
|
@ -58,7 +31,7 @@ const FeaturesPage = () => {
|
|||
})}
|
||||
|
||||
</span>
|
||||
<img className='scale' src="/Features/main.png" alt="" />
|
||||
<img className='scale' src={Features.mainImage} alt="" />
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,39 +1,42 @@
|
|||
import React from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { BsGooglePlay } from 'react-icons/bs'
|
||||
import { FaApple } from 'react-icons/fa'
|
||||
import {Home,Links} from '../../data.json'
|
||||
|
||||
const HomePage = () => {
|
||||
const { t } = useTranslation()
|
||||
|
||||
const handleClick = (href:string)=>{
|
||||
window.location.href = href
|
||||
}
|
||||
|
||||
return (
|
||||
<div className='HomePage' id='#'>
|
||||
<main>
|
||||
<h1>{t('get_free_download')} <h2>{t('quiz_app')}</h2></h1>
|
||||
<p>{t('reader_distracted')}</p>
|
||||
<h1>{Home.title} <h2> {Home.ApplicationName} </h2></h1>
|
||||
<p>{Home.description}</p>
|
||||
<div>
|
||||
<button>
|
||||
<button onClick={()=>handleClick(Links.google_play_link)}>
|
||||
<div>
|
||||
<BsGooglePlay />
|
||||
</div>
|
||||
<div >
|
||||
<h6>{t('download_on')}</h6>
|
||||
<h5>{t('play_store')}</h5>
|
||||
<h6>{Home.buttonLabel}</h6>
|
||||
<h5> {Home.button1} </h5>
|
||||
</div>
|
||||
</button>
|
||||
<button>
|
||||
<button onClick={()=>handleClick(Links.apple_store_link)}>
|
||||
<div>
|
||||
<FaApple />
|
||||
</div>
|
||||
<div >
|
||||
<h6>{t('available_on')}</h6>
|
||||
<h5>{t('google_play')}</h5>
|
||||
<h6>{Home.buttonLabel}</h6>
|
||||
<h5> {Home.button2} </h5>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</main>
|
||||
<img className='circle' src="/circle.png" alt="" />
|
||||
<img className='shape' src="/shape.svg" alt="" />
|
||||
<img className='slider' src="/Slider.png" alt="" />
|
||||
<img className='slider' src={Home.mainImage} alt="" />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,50 +1,29 @@
|
|||
import React from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import {HowItWork as HowItWorkData} from '../../data.json'
|
||||
|
||||
const HowItWork = () => {
|
||||
|
||||
const HowItWorks = [
|
||||
{
|
||||
"img": "1",
|
||||
"title": "Friendly_Online_Support",
|
||||
"description": "Providing_round_the_clock_technical_support_to_assist_you_with_any_inquiries"
|
||||
},
|
||||
{
|
||||
"img": "2",
|
||||
"title": "Unlimited_Features",
|
||||
"description": "Enjoy_limitless_possibilities_to_customize_your_experience"
|
||||
},
|
||||
{
|
||||
"img": "3",
|
||||
"title": "Modular_and_Switchable_Component",
|
||||
"description": "Easily_switch_between_layouts_and_even_demos"
|
||||
},
|
||||
{
|
||||
"img": "4",
|
||||
"title": "High_Resolution",
|
||||
"description": "Get_high_quality_images_and_videos"
|
||||
},
|
||||
]
|
||||
const [t] = useTranslation()
|
||||
|
||||
return (
|
||||
<div className='HowItWork' id='how_it_work'>
|
||||
<h1> كيف يعمل؟ </h1>
|
||||
<h1> {HowItWorkData.title}</h1>
|
||||
<p>
|
||||
استضافة احترافية بسعر مناسب. تلخيص الكفاءات الأساسية التي تركز على المبدأ بشكل مميز من خلال الكفاءات الأساسية التي تركز على العميل.
|
||||
{HowItWorkData.description}
|
||||
</p>
|
||||
<div>
|
||||
<span>
|
||||
{HowItWorks.slice(0,2).map((item, index) => {
|
||||
{Object.entries(HowItWorkData.Data).slice(0,2).map((item, index) => {
|
||||
return (
|
||||
<article key={index}>
|
||||
<img className='scale' src={`/HowItWorks/${item.img}.png`} alt={`${index}`} />
|
||||
<img className='scale' src={item[1].img} alt={`${index}`} />
|
||||
<div>
|
||||
<h4>
|
||||
{t(item.title)}
|
||||
{t(item[1].title)}
|
||||
</h4>
|
||||
<p>
|
||||
{t(item.description)}
|
||||
{t(item[1].description)}
|
||||
</p>
|
||||
</div>
|
||||
</article>
|
||||
|
|
@ -53,16 +32,16 @@ const HowItWork = () => {
|
|||
</span>
|
||||
<img className='scale' src="/HowItWorks/main.png" alt="" />
|
||||
<span>
|
||||
{HowItWorks.slice(2,4).map((item, index) => {
|
||||
{Object.entries(HowItWorkData.Data).slice(2,4).map((item, index) => {
|
||||
return (
|
||||
<article key={index}>
|
||||
<img src={`/HowItWorks/${item.img}.png`} alt={`${index}`} />
|
||||
<img src={item[1].img} alt={`${item[1].img}`} />
|
||||
<div>
|
||||
<h4>
|
||||
{t(item.title)}
|
||||
{t(item[1].title)}
|
||||
</h4>
|
||||
<p>
|
||||
{t(item.description)}
|
||||
{t(item[1].description)}
|
||||
</p>
|
||||
</div>
|
||||
</article>
|
||||
|
|
|
|||
|
|
@ -1,50 +1,27 @@
|
|||
import React from 'react'
|
||||
import { Rate } from 'antd';
|
||||
import {NotePage as NotePageData} from '../../data.json'
|
||||
|
||||
const NotePage = () => {
|
||||
const Note = [
|
||||
{
|
||||
description:"تسهيل الضرورات الوظيفية بشكل جوهري بدون خدمات وصفية من الجيل التالي. إحداث ثورة مقنعة في المستخدمين في جميع أنحاء العالم مقابل أفضل ممارسات المؤسسة",
|
||||
rate:4,
|
||||
img:"/Note/1.png",
|
||||
name:"إليسا اسكندر"
|
||||
|
||||
},
|
||||
{
|
||||
description:"تسهيل الضرورات الوظيفية بشكل جوهري بدون خدمات وصفية من الجيل التالي. إحداث ثورة مقنعة في المستخدمين في جميع أنحاء العالم مقابل أفضل ممارسات المؤسسة",
|
||||
rate:4,
|
||||
img:"/Note/1.png",
|
||||
name:"إليسا اسكندر"
|
||||
|
||||
},
|
||||
{
|
||||
description:"تسهيل الضرورات الوظيفية بشكل جوهري بدون خدمات وصفية من الجيل التالي. إحداث ثورة مقنعة في المستخدمين في جميع أنحاء العالم مقابل أفضل ممارسات المؤسسة",
|
||||
rate:4,
|
||||
img:"/Note/1.png",
|
||||
name:"إليسا اسكندر"
|
||||
|
||||
},
|
||||
|
||||
]
|
||||
return (
|
||||
<div className='NotePage' id='note' >
|
||||
<h1> ماذا يقول عملاؤنا عن ذاكر </h1>
|
||||
<h1> {NotePageData.title} </h1>
|
||||
<p>
|
||||
استضافة احترافية بسعر مناسب. تلخيص الكفاءات الأساسية التي تركز على المبدأ بشكل مميز من خلال الكفاءات الأساسية التي تركز على العميل.
|
||||
{NotePageData.description}
|
||||
</p>
|
||||
<div>
|
||||
{Note.map((item,index:number)=>{
|
||||
{Object.entries(NotePageData.Data).map((item,index:number)=>{
|
||||
return (
|
||||
<article key={index}>
|
||||
<div>
|
||||
<p>
|
||||
{item.description}
|
||||
{item[1].description}
|
||||
</p>
|
||||
<Rate value={item.rate} />
|
||||
<Rate value={item[1].rate} />
|
||||
</div>
|
||||
<span>
|
||||
<img src={item.img} alt="" />
|
||||
<h5> {item.name} </h5>
|
||||
<img src={item[1].img} alt="" />
|
||||
<h5> {item[1].name} </h5>
|
||||
</span>
|
||||
</article>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,13 +1,16 @@
|
|||
import React from 'react'
|
||||
import SwipeScreenShoot from '../components/SwiperScreenShoot'
|
||||
|
||||
import {ScreenShoot as ScreenShootData} from '../../data.json'
|
||||
|
||||
|
||||
const ScreenShoot = () => {
|
||||
return (
|
||||
<div className='ScreenShoot' id='screen_shoot'>
|
||||
|
||||
<h1> لقطات شاشة التطبيق </h1>
|
||||
<h1> {ScreenShootData.title} </h1>
|
||||
<p>
|
||||
استضافة احترافية بسعر مناسب. تلخيص الكفاءات الأساسية التي تركز على المبدأ بشكل مميز من خلال الكفاءات الأساسية التي تركز على العميل.
|
||||
{ScreenShootData.description}
|
||||
</p>
|
||||
|
||||
<SwipeScreenShoot/>
|
||||
|
|
|
|||
|
|
@ -1,35 +1,11 @@
|
|||
import React, { useState } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { FaPlayCircle } from 'react-icons/fa';
|
||||
import { PiPlayCircle } from 'react-icons/pi';
|
||||
import ReactPlayer from 'react-player';
|
||||
import {VideoPage as VideoPageData} from '../../data.json'
|
||||
|
||||
const VideoPage = () => {
|
||||
const [isPlaying, setIsPlaying] = useState(false);
|
||||
const [t] = useTranslation();
|
||||
|
||||
const details = [
|
||||
{
|
||||
"img": "1",
|
||||
"title": "Friendly_Online_Support",
|
||||
"number": "1111"
|
||||
},
|
||||
{
|
||||
"img": "2",
|
||||
"title": "Unlimited_Features",
|
||||
"number": "2222"
|
||||
},
|
||||
{
|
||||
"img": "3",
|
||||
"title": "Modular_and_Switchable_Component",
|
||||
"number": "3333"
|
||||
},
|
||||
{
|
||||
"img": "4",
|
||||
"title": "High_Resolution",
|
||||
"number": "4444"
|
||||
},
|
||||
];
|
||||
|
||||
const handlePlayPause = () => {
|
||||
setIsPlaying(!isPlaying);
|
||||
|
|
@ -41,20 +17,20 @@ const VideoPage = () => {
|
|||
<img src="/Video/video.png" alt="" />
|
||||
|
||||
<main>
|
||||
<h1>منصة التطبيق الأكثر استخداما</h1>
|
||||
<h1>{VideoPageData.title}</h1>
|
||||
<p>
|
||||
ابدأ العمل مع ذلك الذي يمكن أن يوفر كل ما تحتاجه لتوليد الوعي وزيادة حركة المرور والتواصل. تحويل القيمة الدقيقة بكفاءة من خلال المحتوى الذي يركز على العميل.
|
||||
{VideoPageData.description}
|
||||
</p>
|
||||
<img src="/Video/Play.png" alt="" />
|
||||
<img src={VideoPageData.mainImage} alt="" />
|
||||
</main>
|
||||
|
||||
<span>
|
||||
{details.map((item, index) => (
|
||||
{Object.entries(VideoPageData.Data).map((item, index) => (
|
||||
<article key={index}>
|
||||
<img src={`/Video/${item.img}.png`} alt={`${index}`} />
|
||||
<img src={`/Video/${item[1].img}.png`} alt={`${index}`} />
|
||||
|
||||
<h4>{t(item.number)}</h4>
|
||||
<p>{t(item.title)}</p>
|
||||
<h4>{t(item[1].number)}</h4>
|
||||
<p>{t(item[1].title)}</p>
|
||||
|
||||
</article>
|
||||
))}
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
|
||||
.Forms{
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
|
@ -50,6 +51,7 @@
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
min-width: 40vw;
|
||||
p{
|
||||
color: var(--text);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user