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

privacy page

Browse Source
This commit is contained in:
Moaz Dawalibi 2024-10-16 15:07:19 +03:00
parent 9d623cad0c
commit 2bd688097b
16 changed files with 316 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
data.json
View File

File diff suppressed because one or more lines are too long

61
package-lock.json generated
View File

@ -15,6 +15,7 @@
"react-dom": "^18.3.1",
"react-icons": "^5.3.0",
"react-player": "^2.16.0",
"react-router-dom": "^6.27.0",
"swiper": "^11.1.14"
},
"devDependencies": {
@ -1416,6 +1417,14 @@
"react-dom": ">=16.9.0"
}
},
"node_modules/@remix-run/router": {
"version": "1.20.0",
"resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.20.0.tgz",
"integrity": "sha512-mUnk8rPJBI9loFDZ+YzPGdeniYK+FTmRD1TMCz7ev2SNIozyKKpnGgsxO34u6Z4z/t0ITuu7voi/AshfsGsgFg==",
"engines": {
"node": ">=14.0.0"
}
},
"node_modules/@rollup/rollup-android-arm-eabi": {
"version": "4.24.0",
"resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.24.0.tgz",
@ -4033,6 +4042,36 @@
"node": ">=0.10.0"
}
},
"node_modules/react-router": {
"version": "6.27.0",
"resolved": "https://registry.npmjs.org/react-router/-/react-router-6.27.0.tgz",
"integrity": "sha512-YA+HGZXz4jaAkVoYBE98VQl+nVzI+cVI2Oj/06F5ZM+0u3TgedN9Y9kmMRo2mnkSK2nCpNQn0DVob4HCsY/WLw==",
"dependencies": {
"@remix-run/router": "1.20.0"
},
"engines": {
"node": ">=14.0.0"
},
"peerDependencies": {
"react": ">=16.8"
}
},
"node_modules/react-router-dom": {
"version": "6.27.0",
"resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.27.0.tgz",
"integrity": "sha512-+bvtFWMC0DgAFrfKXKG9Fc+BcXWRUO1aJIihbB79xaeq0v5UzfvnM5houGUm1Y461WVRcgAQ+Clh5rdb1eCx4g==",
"dependencies": {
"@remix-run/router": "1.20.0",
"react-router": "6.27.0"
},
"engines": {
"node": ">=14.0.0"
},
"peerDependencies": {
"react": ">=16.8",
"react-dom": ">=16.8"
}
},
"node_modules/readdirp": {
"version": "4.0.2",
"resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.0.2.tgz",
@ -5579,6 +5618,11 @@
"rc-util": "^5.38.0"
}
},
"@remix-run/router": {
"version": "1.20.0",
"resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.20.0.tgz",
"integrity": "sha512-mUnk8rPJBI9loFDZ+YzPGdeniYK+FTmRD1TMCz7ev2SNIozyKKpnGgsxO34u6Z4z/t0ITuu7voi/AshfsGsgFg=="
},
"@rollup/rollup-android-arm-eabi": {
"version": "4.24.0",
"resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.24.0.tgz",
@ -7443,6 +7487,23 @@
"integrity": "sha512-jCvmsr+1IUSMUyzOkRcvnVbX3ZYC6g9TDrDbFuFmRDq7PD4yaGbLKNQL6k2jnArV8hjYxh7hVhAZB6s9HDGpZA==",
"dev": true
},
"react-router": {
"version": "6.27.0",
"resolved": "https://registry.npmjs.org/react-router/-/react-router-6.27.0.tgz",
"integrity": "sha512-YA+HGZXz4jaAkVoYBE98VQl+nVzI+cVI2Oj/06F5ZM+0u3TgedN9Y9kmMRo2mnkSK2nCpNQn0DVob4HCsY/WLw==",
"requires": {
"@remix-run/router": "1.20.0"
}
},
"react-router-dom": {
"version": "6.27.0",
"resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.27.0.tgz",
"integrity": "sha512-+bvtFWMC0DgAFrfKXKG9Fc+BcXWRUO1aJIihbB79xaeq0v5UzfvnM5houGUm1Y461WVRcgAQ+Clh5rdb1eCx4g==",
"requires": {
"@remix-run/router": "1.20.0",
"react-router": "6.27.0"
}
},
"readdirp": {
"version": "4.0.2",
"resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.0.2.tgz",

1
package.json
View File

@ -18,6 +18,7 @@
"react-dom": "^18.3.1",
"react-icons": "^5.3.0",
"react-player": "^2.16.0",
"react-router-dom": "^6.27.0",
"swiper": "^11.1.14"
},
"devDependencies": {

53
src/App.tsx
View File

@ -1,25 +1,46 @@
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import { lazy, Suspense } from 'react';
import { Spin } from 'antd';
import Layout from './components/layout/Layout';
import DownloadPage from './pages/DownloadPage';
import FeaturesPage from './pages/FeaturesPage';
import HomePage from './pages/HomePage';
import HowItWork from './pages/HowItWork';
import NotePage from './pages/NotePage';
import ScreenShoot from './pages/ScreenShoot';
import VideoPage from './pages/VideoPage';
import ContactPage from './pages/ContactPage';
import './styles/App/index.scss';
const PrivacyPage = lazy(() => import("./pages/Privacy/Page"));
const Page = lazy(() => import("./pages/Main/Page"));
const NotFoundPage = lazy(() => import("./pages/NotFound/NotFound"));
const App = () => {
return (
<Router>
<Routes>
<Route
path="/"
element={
<Suspense fallback={<Spin />}>
<Layout>
<HomePage />
<FeaturesPage />
<HowItWork />
<VideoPage />
<ScreenShoot />
<NotePage />
<DownloadPage />
<ContactPage />
<Page />
</Layout>
</Suspense>
}
/>
<Route
path="/privacy"
element={
<Suspense fallback={<Spin />}>
<Layout>
<PrivacyPage />
</Layout>
</Suspense>
}
/>
<Route
path="*"
element={
<Suspense fallback={<Spin />}>
<NotFoundPage/>
</Suspense>
}
/>
</Routes>
</Router>
);
};

15
src/components/UI/IconCircle.tsx Normal file
View File

@ -0,0 +1,15 @@
import { ReactElement } from 'react'
const IconCircle = ({icon,color,hoverColor}:{icon?:ReactElement,color?:string,hoverColor?:string}) => {
return (
<div className='icon_circle'>
<span
style={{color:color,borderColor:color}}
>
{icon}
</span>
</div>
)
}
export default IconCircle

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

@ -22,6 +22,7 @@ const NavBar: React.FC = () => {
{ path: RoutesEnums.SCREEN_SHOOT, label: navBarData.link4 },
{ path: RoutesEnums.NOTE, label: navBarData.link5 },
{ path: RoutesEnums.CONTACT, label: navBarData.link6 },
{ path: RoutesEnums.PRIVACY, label: navBarData.link7 },
];
const [Open, setOpen] = useState(false);
const handleToggle = () => {
@ -56,8 +57,10 @@ const NavBar: React.FC = () => {
const handleClick = () => {
setActive(link.path);
};
console.log(link);
const isActive =
Active === '' && link.path === '#' ? true : Active === link.path;
Active === '' && link.path === '/#' ? true : Active === link.path;
return (
<li
key={link.path}

13
src/enums/RoutesEnums.ts
View File

@ -1,8 +1,9 @@
export enum RoutesEnums {
HOME = '#',
FEATURES = '#features',
HOW_IT_WORK = '#how_it_work',
SCREEN_SHOOT = '#screen_shoot',
NOTE = '#note',
CONTACT = '#contact_us',
HOME = '/#',
FEATURES = '/#features',
HOW_IT_WORK = '/#how_it_work',
SCREEN_SHOOT = '/#screen_shoot',
NOTE = '/#note',
CONTACT = '/#contact_us',
PRIVACY = '/privacy',
}

24
src/pages/Main/Page.tsx Normal file
View File

@ -0,0 +1,24 @@
import DownloadPage from '../DownloadPage';
import FeaturesPage from '../FeaturesPage';
import HomePage from '../HomePage';
import HowItWork from '../HowItWork';
import NotePage from '../NotePage';
import ScreenShoot from '../ScreenShoot';
import VideoPage from '../VideoPage';
import ContactPage from '../ContactPage';
const Page = () => {
return (
<>
<HomePage />
<FeaturesPage />
<HowItWork />
<VideoPage />
<ScreenShoot />
<NotePage />
<DownloadPage />
<ContactPage />
</>
)
}
export default Page

20
src/pages/NotFound/NotFound.tsx Normal file
View File

@ -0,0 +1,20 @@
import { Button } from 'antd'
import { useNavigate } from 'react-router-dom'
import { NotFound as NotFoundData } from '../../../data.json';
import { ImSad2 } from 'react-icons/im';
const NotFound = () => {
const nav = useNavigate();
return (
<div className='not_found'>
{NotFoundData.title}
<Button className='button' onClick={()=>nav('/')}>
{NotFoundData.description}
</Button>
<ImSad2/>
</div>
)
}
export default NotFound

27
src/pages/Privacy/Page.tsx Normal file
View File

@ -0,0 +1,27 @@
import { Privacy as PrivacyData } from '../../../data.json';
const Page = () => {
return (
<div className='privacy'>
<h2>{PrivacyData.title}</h2>
<div>
<h5>{PrivacyData.SubTitle1}</h5>
<p>{PrivacyData.introduction}</p>
</div>
<div>
<h5>{PrivacyData.SubTitle2}</h5>
<p>{PrivacyData.description}</p>
</div>
<div>
<h5>{PrivacyData.SubTitle3}</h5>
<p>{PrivacyData.conclusion}</p>
</div>
</div>
)
}
export default Page

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

@ -14,3 +14,33 @@
}
.spinner {
}
.not_found{
@include Flex;
text-align: center;
background: var(--thirdly);
color: var(--white);
font-size: 40px;
width: 100%;height: 100vh;
display: flex; flex-direction: column;
gap: 30px;
}
.button {
outline: none;
border: none;
border-radius: 10px;
padding: 3vw 1vw;
background: var(--secondary);
color: var(--white);
display: flex;
align-items: center;
justify-content: center;
gap: 5px;
font-size: 20px;
width: 200px;
&:hover{
color: var(--thirdly) !important;
}
}

18
src/styles/components/IconCircle.scss Normal file
View File

@ -0,0 +1,18 @@
.icon_circle{
width: 50px;
height: 50px;
border-radius: 50%;
border-color: var(--primary);
color: var(--primary);
@include Flex; text-align: center;
svg{
color: var(--primary);
font-size: 30px;
}
&:hover{
background: var(--primary);
svg{
color: var(--white);
}
}
}

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

@ -11,3 +11,9 @@
// z-index: 1000;
// background: black;
// }
.Layout{
// display: flex;align-items: center;justify-content: center; flex-direction: column;
}

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

@ -4,3 +4,4 @@
@import './NavBar.scss';
@import './Footer.scss';
@import './BackToTop.scss';
@import './IconCircle.scss';

47
src/styles/pages/Privacy.scss Normal file
View File

@ -0,0 +1,47 @@
.privacy{
display: flex; flex-direction: column;
width: 90%;
margin-inline: auto;
min-height: 100vh;
transform: translateY(130px);
gap: 30px;
h2{
font-size: 40px;
color: var(--text);
}
h5{
font-size: 30px;
color: var(--thirdly) !important;
}
p{
color: rgb(97, 97, 97);
font-size: 18px;
}
}
@media screen and (max-width: 700px) {
.privacy{
display: flex; flex-direction: column;
width: 90%;
margin-inline: auto;
min-height: 100vh;
transform: translateY(130px);
gap: 20px;
padding-bottom: 100px;
h2{
font-size: 30px;
color: var(--text);
}
h5{
font-size: 24px;
color: var(--thirdly) !important;
}
p{
color: rgb(97, 97, 97);
font-size: 14px;
}
}
}

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

@ -6,3 +6,4 @@
@import './NotePage.scss';
@import './DownloadPage.scss';
@import './ContactPage.scss';
@import './Privacy.scss';