privacy page

package-lock.json

@@ -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",

package.json

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

src/App.tsx

@@ -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 (
-    <Layout>
+    <Router>
-      <HomePage />
+      <Routes>
-      <FeaturesPage />
+        <Route 
-      <HowItWork />
+          path="/" 
-      <VideoPage />
+          element={
-      <ScreenShoot />
+            <Suspense fallback={<Spin />}>
-      <NotePage />
+              <Layout>  
-      <DownloadPage />
+                <Page /> 
-      <ContactPage />
+              </Layout>
-    </Layout>
+            </Suspense>
+          } 
+        />
+        <Route 
+          path="/privacy" 
+          element={
+            <Suspense fallback={<Spin />}>
+              <Layout>  
+                <PrivacyPage /> 
+              </Layout>
+            </Suspense>
+          } 
+        />
+        <Route 
+          path="*" 
+          element={
+            <Suspense fallback={<Spin />}>
+              <NotFoundPage/>
+            </Suspense>
+          } 
+        />
+      </Routes>
+    </Router>
   );
 };
 

src/components/UI/IconCircle.tsx

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

src/components/layout/NavBar.tsx

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

src/enums/RoutesEnums.ts

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

src/pages/Main/Page.tsx

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

src/pages/NotFound/NotFound.tsx

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

src/pages/Privacy/Page.tsx

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

src/styles/App/classNames.scss

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

src/styles/components/IconCircle.scss

@@ -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);
+        }
+    }
+}

src/styles/components/Layout.scss

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

src/styles/components/index.scss

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

src/styles/pages/Privacy.scss

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

src/styles/pages/index.scss

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