init commit

.gitignore

@@ -102,3 +102,5 @@ dist
 
 # TernJS port file
 .tern-port
+
+*.lock

README.md

@@ -0,0 +1,68 @@
+This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
+
+## Available Scripts
+
+In the project directory, you can run:
+
+### `yarn start`
+
+Runs the app in the development mode.<br />
+Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
+
+The page will reload if you make edits.<br />
+You will also see any lint errors in the console.
+
+### `yarn test`
+
+Launches the test runner in the interactive watch mode.<br />
+See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
+
+### `yarn build`
+
+Builds the app for production to the `build` folder.<br />
+It correctly bundles React in production mode and optimizes the build for the best performance.
+
+The build is minified and the filenames include the hashes.<br />
+Your app is ready to be deployed!
+
+See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
+
+### `yarn eject`
+
+**Note: this is a one-way operation. Once you `eject`, you can’t go back!**
+
+If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
+
+Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
+
+You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
+
+## Learn More
+
+You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
+
+To learn React, check out the [React documentation](https://reactjs.org/).
+
+### Code Splitting
+
+This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting
+
+### Analyzing the Bundle Size
+
+This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size
+
+### Making a Progressive Web App
+
+This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app
+
+### Advanced Configuration
+
+This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration
+
+### Deployment
+
+This section has moved here: https://facebook.github.io/create-react-app/docs/deployment
+
+### `yarn build` fails to minify
+
+This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify

docker-compose.yml

@@ -0,0 +1,14 @@
+version: "3"
+
+services:
+    app:
+        container_name: "front_app"
+        image: node:lts-alpine
+        volumes:
+            - .:/app
+            - /app/node_modules
+        ports:
+            - 3000:3000
+        working_dir: /app
+        tty: true
+        command: sh -c "yarn install && yarn start"

package.json

@@ -0,0 +1,43 @@
+{
+  "name": "react-app",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@testing-library/jest-dom": "^4.2.4",
+    "@testing-library/react": "^9.3.2",
+    "@testing-library/user-event": "^7.1.2",
+    "antd": "^4.5.2",
+    "bootstrap": "^4.5.3",
+    "node-sass": "^4.14.1",
+    "react": "^16.13.1",
+    "react-cookies": "^0.1.1",
+    "react-dom": "^16.13.1",
+    "react-icons": "^3.10.0",
+    "react-router-dom": "^5.2.0",
+    "react-scripts": "3.4.1",
+    "react-select": "^3.1.0",
+    "yarn": "^1.22.4"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build:d": "react-scripts build",
+    "build": "GENERATE_SOURCEMAP=false react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": "react-app"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}

public/index.html

@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="Web site created using create-react-app"
+    />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>App</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>

public/manifest.json

@@ -0,0 +1,25 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "logo192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "logo512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}

public/robots.txt

@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:

src/App.js

@@ -0,0 +1,44 @@
+import React from 'react';
+import {BrowserRouter, Switch, Route} from 'react-router-dom';
+import Main from './components/public/main';
+import routes from './components/public/routes';
+
+
+function App() {
+  return (
+    <BrowserRouter>
+      <Switch>
+        {routes.map(({ path, Component }, key) => (
+            <Route
+              exact
+              path={path}
+              key={key}
+              render={props => {
+                // const crumbs = routes
+                //   // Get all routes that contain the current one.
+                //   .filter(({ path }) => props.match.path.includes(path))
+                //   // Swap out any dynamic routes with their param values.
+                //   // E.g. "/pizza/:pizzaId" will become "/pizza/1"
+                //   .map(({ path, ...rest }) => ({
+                //     path: Object.keys(props.match.params).length
+                //       ? Object.keys(props.match.params).reduce(
+                //         (path, param) => path.replace(
+                //           `:${param}`, props.match.params[param]
+                //         ), path
+                //         )
+                //       : path,
+                //     ...rest
+                //   }));
+                // props.crumbs = crumbs;
+                return (
+                    <Main {...props}> <Component {...props} /> </Main>
+                );
+              }}
+            />
+        ))}
+        </Switch>
+    </BrowserRouter>
+  );
+}
+
+export default App;

src/App.test.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import App from './App';
+
+test('renders learn react link', () => {
+  const { getByText } = render(<App />);
+  const linkElement = getByText(/learn react/i);
+  expect(linkElement).toBeInTheDocument();
+});

src/assets/icons/arrow.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="13.804" height="8.524" viewBox="0 0 13.804 8.524">
+  <path id="Path_139" data-name="Path 139" d="M8.59,18.182l5.268-5.28L8.59,7.622,10.212,6l6.9,6.9-6.9,6.9Z" transform="translate(19.804 -8.59) rotate(90)" fill="#FFF"/>
+</svg>

src/assets/icons/arrow2.svg

@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20" viewBox="0 0 20 20">
+  <defs>
+    <linearGradient id="linear-gradient" x1="0.5" x2="0.5" y2="1" gradientUnits="objectBoundingBox">
+      <stop offset="0" stop-color="#4adede"/>
+      <stop offset="1" stop-color="#24b2e9"/>
+    </linearGradient>
+    <linearGradient id="linear-gradient-2" x1="0" y1="0.5" x2="1.132" y2="0.5" xlink:href="#linear-gradient"/>
+  </defs>
+  <g id="arrow" transform="translate(-371 -603)">
+    <circle id="Ellipse_77" data-name="Ellipse 77" cx="10" cy="10" r="10" transform="translate(371 603)" fill="url(#linear-gradient)"/>
+    <circle id="Ellipse_78" data-name="Ellipse 78" cx="9" cy="9" r="9" transform="translate(372 604)" fill="#fff"/>
+    <path id="Path_178" data-name="Path 178" d="M0,1.332,4.327,5.668,0,10l1.332,1.332L7,5.668,1.332,0Z" transform="translate(386.336 610) rotate(90)" opacity="0.9" fill="url(#linear-gradient-2)"/>
+  </g>
+</svg>

src/assets/icons/eye.svg

@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="27.113" height="18.486" viewBox="0 0 27.113 18.486">
+  <g id="eye" transform="translate(0 -74.667)">
+    <g id="Group_388" data-name="Group 388" transform="translate(0 74.667)">
+      <g id="Group_387" data-name="Group 387" transform="translate(0 0)">
+        <path id="Path_145" data-name="Path 145" d="M174.364,170.667a3.7,3.7,0,1,0,3.7,3.7A3.7,3.7,0,0,0,174.364,170.667Z" transform="translate(-160.808 -165.121)" fill="#3b5286"/>
+        <path id="Path_146" data-name="Path 146" d="M13.556,74.667A14.575,14.575,0,0,0,0,83.91a14.563,14.563,0,0,0,27.113,0A14.569,14.569,0,0,0,13.556,74.667Zm0,15.4a6.162,6.162,0,1,1,6.162-6.162A6.164,6.164,0,0,1,13.556,90.072Z" transform="translate(0 -74.667)" fill="#3b5286"/>
+      </g>
+    </g>
+  </g>
+</svg>

src/assets/icons/filter.svg

@@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16.331" height="16.332" viewBox="0 0 16.331 16.332">
+  <defs>
+    <linearGradient id="linear-gradient" x1="0.5" x2="0.5" y2="1" gradientUnits="objectBoundingBox">
+      <stop offset="0" stop-color="#4adede"/>
+      <stop offset="1" stop-color="#24b2e9"/>
+    </linearGradient>
+  </defs>
+  <g id="filter" transform="translate(-0.004)">
+    <g id="Group_434" data-name="Group 434" transform="translate(0.004)">
+      <path id="Path_177" data-name="Path 177" d="M15.752,0H.587A.583.583,0,0,0,0,.583V3.5A.583.583,0,0,0,.2,3.933l5.64,5.076v6.74a.583.583,0,0,0,.844.522l3.5-1.75A.583.583,0,0,0,10.5,14V9.008l5.64-5.074a.583.583,0,0,0,.193-.435V.583A.583.583,0,0,0,15.752,0Zm-.583,3.24L9.529,8.314a.583.583,0,0,0-.193.435v4.889L7,14.8V8.749a.583.583,0,0,0-.193-.433L1.171,3.24V1.167h14Z" transform="translate(-0.004)" fill="url(#linear-gradient)"/>
+    </g>
+  </g>
+</svg>

src/assets/icons/flash.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16.884" height="22.381" viewBox="0 0 16.884 22.381">
+  <g id="flash" transform="translate(-171.396 -94.246)">
+    <g id="Group_439" data-name="Group 439" transform="translate(171.396 94.246)">
+      <path id="Path_195" data-name="Path 195" d="M79.762,7.073H72.093L76.169,0H66.95L62.878,11.637h6.546l-2.9,10.745Z" transform="translate(-62.878)" fill="#1aa7ec"/>
+    </g>
+  </g>
+</svg>

src/assets/icons/heart.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="22.845" height="20.75" viewBox="0 0 22.845 20.75">
+  <path id="heart" d="M11.423,20.75c1.5-.827,11.423-6.6,11.423-14.426A6.29,6.29,0,0,0,16.93,0a5.927,5.927,0,0,0-5.152,3.015.425.425,0,0,1-.711,0A5.927,5.927,0,0,0,5.916,0,6.29,6.29,0,0,0,0,6.323c0,7.823,9.924,13.6,11.423,14.426Zm0,0" transform="translate(0)" fill="#ff3e3e"/>
+</svg>

src/assets/icons/pencil-reverse.svg

@@ -0,0 +1,19 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="15.17" height="15.17" viewBox="0 0 15.17 15.17">
+  <g id="pencil" transform="translate(0 0)">
+    <g id="Group_429" data-name="Group 429" transform="translate(0 10.467)">
+      <g id="Group_428" data-name="Group 428">
+        <path id="Path_175" data-name="Path 175" d="M1.517,353.28,0,357.983l4.7-1.517Z" transform="translate(0 -353.28)" fill="#24B2E9"/>
+      </g>
+    </g>
+    <g id="Group_431" data-name="Group 431" transform="translate(2.582 1.976)">
+      <g id="Group_430" data-name="Group 430" transform="translate(0 0)">
+        <rect id="Rectangle_86" data-name="Rectangle 86" width="10.467" height="4.551" transform="translate(0 7.401) rotate(-45)" fill="#24B2E9"/>
+      </g>
+    </g>
+    <g id="Group_433" data-name="Group 433" transform="translate(11.074 0)">
+      <g id="Group_432" data-name="Group 432">
+        <path id="Path_176" data-name="Path 176" d="M377.628,2.351,375.5.228a.733.733,0,0,0-1.062,0L373.76.91,376.946,4.1l.683-.683A.733.733,0,0,0,377.628,2.351Z" transform="translate(-373.76)" fill="#24B2E9"/>
+      </g>
+    </g>
+  </g>
+</svg>

src/assets/icons/pencil.svg

@@ -0,0 +1,19 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="15.17" height="15.17" viewBox="0 0 15.17 15.17">
+  <g id="pencil" transform="translate(0 0)">
+    <g id="Group_429" data-name="Group 429" transform="translate(0 10.467)">
+      <g id="Group_428" data-name="Group 428">
+        <path id="Path_175" data-name="Path 175" d="M1.517,353.28,0,357.983l4.7-1.517Z" transform="translate(0 -353.28)" fill="#fff"/>
+      </g>
+    </g>
+    <g id="Group_431" data-name="Group 431" transform="translate(2.582 1.976)">
+      <g id="Group_430" data-name="Group 430" transform="translate(0 0)">
+        <rect id="Rectangle_86" data-name="Rectangle 86" width="10.467" height="4.551" transform="translate(0 7.401) rotate(-45)" fill="#fff"/>
+      </g>
+    </g>
+    <g id="Group_433" data-name="Group 433" transform="translate(11.074 0)">
+      <g id="Group_432" data-name="Group 432">
+        <path id="Path_176" data-name="Path 176" d="M377.628,2.351,375.5.228a.733.733,0,0,0-1.062,0L373.76.91,376.946,4.1l.683-.683A.733.733,0,0,0,377.628,2.351Z" transform="translate(-373.76)" fill="#fff"/>
+      </g>
+    </g>
+  </g>
+</svg>

src/assets/icons/pic/Group 1007.svg

@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="500" height="700" viewBox="0 0 500 700">
+  <g id="Group_1007" data-name="Group 1007" transform="translate(4099 -3820)">
+    <rect id="pic" width="500" height="700" transform="translate(-4099 3820)" fill="#ebebeb"/>
+    <g id="image" transform="translate(-3964 4055)">
+      <g id="Group_1006" data-name="Group 1006">
+        <g id="Group_1005" data-name="Group 1005">
+          <path id="Path_200" data-name="Path 200" d="M208.63,0H21.582A21.582,21.582,0,0,0,0,21.582V208.63a21.582,21.582,0,0,0,21.582,21.582H208.63a21.582,21.582,0,0,0,21.582-21.582V21.582A21.582,21.582,0,0,0,208.63,0Zm7.194,208.63a7.194,7.194,0,0,1-7.194,7.194H21.582a7.194,7.194,0,0,1-7.194-7.194V21.582a7.194,7.194,0,0,1,7.194-7.194H208.63a7.194,7.194,0,0,1,7.194,7.194Z" fill="#abb3c6"/>
+          <path id="Path_201" data-name="Path 201" d="M200.338,256.556a7.194,7.194,0,0,0-10.144,0L173.647,273.1l-30.863-30.863a7.194,7.194,0,0,0-10.144,0L82.282,292.6a7.194,7.194,0,0,0,5.036,12.23H231.2a7.194,7.194,0,0,0,5.108-12.3Z" transform="translate(-44.153 -132.169)" fill="#abb3c6"/>
+          <circle id="Ellipse_84" data-name="Ellipse 84" cx="22.101" cy="22.101" r="22.101" transform="translate(115.106 56.17)" fill="#abb3c6"/>
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>

src/assets/icons/pic/Group 1011.svg

@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="300" height="210.448" viewBox="0 0 300 210.448">
+  <g id="Group_1011" data-name="Group 1011" transform="translate(4099 -3877)">
+    <path id="pic" d="M10,0H290a10,10,0,0,1,10,10V210.448a0,0,0,0,1,0,0H0a0,0,0,0,1,0,0V10A10,10,0,0,1,10,0Z" transform="translate(-4099 3877)" fill="#ebebeb"/>
+    <g id="image" transform="translate(-3987.99 3943.236)" opacity="0.36">
+      <g id="Group_1006" data-name="Group 1006">
+        <g id="Group_1005" data-name="Group 1005">
+          <path id="Path_200" data-name="Path 200" d="M70.8,0H7.324A7.324,7.324,0,0,0,0,7.324V70.8a7.324,7.324,0,0,0,7.324,7.324H70.8A7.324,7.324,0,0,0,78.123,70.8V7.324A7.324,7.324,0,0,0,70.8,0ZM73.24,70.8A2.441,2.441,0,0,1,70.8,73.24H7.324A2.441,2.441,0,0,1,4.883,70.8V7.324A2.441,2.441,0,0,1,7.324,4.883H70.8A2.441,2.441,0,0,1,73.24,7.324Z" fill="#3b5286"/>
+          <path id="Path_201" data-name="Path 201" d="M120.985,245.715a2.441,2.441,0,0,0-3.442,0l-5.615,5.615-10.473-10.473a2.441,2.441,0,0,0-3.442,0L80.923,257.946a2.441,2.441,0,0,0,1.709,4.15h48.827a2.441,2.441,0,0,0,1.733-4.175Z" transform="translate(-67.984 -203.505)" fill="#3b5286"/>
+          <circle id="Ellipse_84" data-name="Ellipse 84" cx="7.5" cy="7.5" r="7.5" transform="translate(39.061 19.061)" fill="#3b5286"/>
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>

src/assets/icons/pic/IGTV-H.svg

@@ -0,0 +1,15 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="500" height="700" viewBox="0 0 500 700">
+  <g id="Group_1266" data-name="Group 1266" transform="translate(4099 -3820)">
+    <rect id="pic" width="500" height="700" transform="translate(-4099 3820)" fill="#ebebeb"/>
+    <g id="Group_1268" data-name="Group 1268" transform="translate(0 20.517)">
+      <path id="movie-player-play-button" d="M92.938,0a92.938,92.938,0,1,0,92.938,92.938A92.933,92.933,0,0,0,92.938,0Zm44.471,100.4L81.972,138.537a9.057,9.057,0,0,1-14.195-7.461V54.8a9.057,9.057,0,0,1,14.195-7.461l55.437,38.137a9.057,9.057,0,0,1,0,14.923Z" transform="translate(-3942 4015.483)" fill="#abb3c6"/>
+      <g id="Group_1267" data-name="Group 1267" transform="translate(2190 1203)">
+        <g id="icons8-igtv" transform="translate(-6095 3072.131)">
+          <path id="Path_1931" data-name="Path 1931" d="M20.919,3,14.959,8.959,9,3" transform="translate(0.932 -3)" fill="none" stroke="#abb3c6" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2"/>
+          <path id="Path_1932" data-name="Path 1932" d="M35.783,14.932V26.851a9.943,9.943,0,0,1-9.932,9.932H13.932A9.943,9.943,0,0,1,4,26.851V14.932A9.943,9.943,0,0,1,13.932,5H25.851A9.943,9.943,0,0,1,35.783,14.932ZM20.374,24.8l7.946-1.986a1.986,1.986,0,0,0-.961-3.854l-5.481,1.369V18.905a1.988,1.988,0,0,0-2.469-1.927l-7.946,1.986a1.986,1.986,0,1,0,.963,3.854l5.479-1.369v1.428A1.986,1.986,0,0,0,20.374,24.8Z" transform="translate(-4 -1.027)" fill="#abb3c6"/>
+        </g>
+        <text id="IGTV" transform="translate(-5984 3103)" fill="#abb3c6" font-size="31" font-family="ArialMT, Arial"><tspan x="-72.338" y="0">IGTV</tspan></text>
+      </g>
+    </g>
+  </g>
+</svg>

src/assets/icons/pic/IGTV.svg

@@ -0,0 +1,15 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="300" height="210.448" viewBox="0 0 300 210.448">
+  <g id="IGTV" transform="translate(6202 -4137)">
+    <g id="Group_1011" data-name="Group 1011" transform="translate(-2103 260)">
+      <path id="pic" d="M10,0H290a10,10,0,0,1,10,10V210.448a0,0,0,0,1,0,0H0a0,0,0,0,1,0,0V10A10,10,0,0,1,10,0Z" transform="translate(-4099 3877)" fill="#ebebeb"/>
+      <path id="movie-player-play-button" d="M39.179,0A39.179,39.179,0,1,0,78.359,39.179,39.177,39.177,0,0,0,39.179,0ZM57.927,42.325,34.557,58.4a3.818,3.818,0,0,1-5.984-3.145V23.1a3.818,3.818,0,0,1,5.984-3.145l23.37,16.077a3.818,3.818,0,0,1,0,6.291Z" transform="translate(-3988 3943)" fill="#abb3c6"/>
+    </g>
+    <g id="Group_1189" data-name="Group 1189" transform="translate(4 1235)">
+      <g id="icons8-igtv" transform="translate(-6099 3069.131)">
+        <path id="Path_1931" data-name="Path 1931" d="M17.29,3,13.145,7.145,9,3" transform="translate(1.908)" fill="none" stroke="#abb3c6" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2"/>
+        <path id="Path_1932" data-name="Path 1932" d="M26.105,11.908V20.2A6.916,6.916,0,0,1,19.2,27.105h-8.29A6.916,6.916,0,0,1,4,20.2v-8.29A6.916,6.916,0,0,1,10.908,5H19.2A6.916,6.916,0,0,1,26.105,11.908ZM15.388,18.774l5.526-1.382a1.381,1.381,0,0,0-.669-2.68l-3.812.952v-.993a1.382,1.382,0,0,0-1.717-1.34L9.191,14.713a1.381,1.381,0,1,0,.67,2.68l3.81-.952v.993a1.381,1.381,0,0,0,1.717,1.34Z" transform="translate(0 0.763)" fill="#abb3c6"/>
+      </g>
+      <text id="IGTV-2" data-name="IGTV" transform="translate(-6017 3094)" fill="#abb3c6" font-size="22" font-family="ArialMT, Arial"><tspan x="-51.337" y="0">IGTV</tspan></text>
+    </g>
+  </g>
+</svg>

src/assets/icons/pic/Logo.svg

@@ -0,0 +1,15 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="99.952" height="99" viewBox="0 0 99.952 99">
+  <defs>
+    <linearGradient id="linear-gradient" y1="0.5" x2="1" y2="0.5" gradientUnits="objectBoundingBox">
+      <stop offset="0" stop-color="#55bec5"/>
+      <stop offset="1" stop-color="#00a3e2"/>
+    </linearGradient>
+  </defs>
+  <g id="Group_1226" data-name="Group 1226" transform="translate(-968 -53)">
+    <text id="سامانه_فیدر_" data-name="سامانه فیدر " transform="translate(970 141)" fill="#234275" font-size="18" font-family="IRANSans-Medium, IRANSans" font-weight="500"><tspan x="0" y="0">سامانه فیدر</tspan><tspan y="0"> </tspan></text>
+    <g id="Group_1225" data-name="Group 1225" transform="translate(661.876 -73.689)">
+      <path id="Path_2004" data-name="Path 2004" d="M446.249,231.384a17.354,17.354,0,0,0-9.889,3.075,7.166,7.166,0,1,1-3.664,3.393,17.435,17.435,0,1,0,13.554-6.469Z" transform="translate(-86.762 -86.766)" fill="url(#linear-gradient)"/>
+      <path id="Path_2005" data-name="Path 2005" d="M405.058,205.984,385.3,186.225a35.335,35.335,0,1,0-5.369,4.685l20.1,20.1a3.477,3.477,0,0,0,4.915,0l.111-.113A3.474,3.474,0,0,0,405.058,205.984Zm-45.57-15.69a28.241,28.241,0,1,1,28.241-28.241A28.241,28.241,0,0,1,359.488,190.294Z" transform="translate(0 0)" fill="#234275"/>
+    </g>
+  </g>
+</svg>

src/assets/icons/pic/PLAY.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="300" height="210.448" viewBox="0 0 300 210.448">
+  <g id="Group_1012" data-name="Group 1012" transform="translate(6202 -4137)">
+    <g id="Group_1011" data-name="Group 1011" transform="translate(-2103 260)">
+      <path id="pic" d="M10,0H290a10,10,0,0,1,10,10V210.448a0,0,0,0,1,0,0H0a0,0,0,0,1,0,0V10A10,10,0,0,1,10,0Z" transform="translate(-4099 3877)" fill="#ebebeb"/>
+      <path id="movie-player-play-button" d="M39.179,0A39.179,39.179,0,1,0,78.359,39.179,39.177,39.177,0,0,0,39.179,0ZM57.927,42.325,34.557,58.4a3.818,3.818,0,0,1-5.984-3.145V23.1a3.818,3.818,0,0,1,5.984-3.145l23.37,16.077a3.818,3.818,0,0,1,0,6.291Z" transform="translate(-3988 3943)" fill="#abb3c6"/>
+    </g>
+  </g>
+</svg>

src/assets/icons/pic/PagePending.svg

@@ -0,0 +1,150 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="763.314" height="444.427" viewBox="0 0 763.314 444.427">
+  <g id="Group_1224" data-name="Group 1224" transform="translate(-43.128 -54.937)">
+    <g id="Group_1204" data-name="Group 1204" transform="translate(281.627 54.937)">
+      <path id="Path_1933" data-name="Path 1933" d="M261.426,83.628c-.263,2.037-8.461-3.661-7-6.983s9.629-8.293,9.629-8.293l4.99,7.68S261.768,80.976,261.426,83.628Z" transform="translate(-254.249 -53.197)" fill="#d77953"/>
+      <g id="Group_1203" data-name="Group 1203" transform="translate(3.613)">
+        <ellipse id="Ellipse_103" data-name="Ellipse 103" cx="13.087" cy="10.278" rx="13.087" ry="10.278" transform="matrix(0.777, -0.629, 0.629, 0.777, 0, 16.642)" fill="#d77953"/>
+        <path id="Path_1934" data-name="Path 1934" d="M274.5,75.825a1.07,1.07,0,1,0,1.425-.512A1.069,1.069,0,0,0,274.5,75.825Z" transform="translate(-255.249 -52.308)"/>
+        <path id="Path_1935" data-name="Path 1935" d="M271.071,70.478a1.158,1.158,0,1,0,1.542-.552A1.159,1.159,0,0,0,271.071,70.478Z" transform="translate(-255.695 -53.007)"/>
+        <path id="Path_1936" data-name="Path 1936" d="M273.881,74.335c-1.031,1.351-2.274,3.04-2.274,3.04a2.591,2.591,0,0,1-2.336-1.826c.628.67,1.458,1.254,2.4.531S273.881,74.335,273.881,74.335Z" transform="translate(-255.914 -52.421)" fill="#c26240"/>
+        <g id="Group_1199" data-name="Group 1199" transform="translate(21.191 21.501)">
+          <path id="Path_1937" data-name="Path 1937" d="M276.218,74.48a.41.41,0,0,0,.28.294,1.2,1.2,0,0,1,.672.567,1.341,1.341,0,0,1-.112,1.1.411.411,0,0,0,.747.342,2.1,2.1,0,0,0,.11-1.792,2.026,2.026,0,0,0-1.183-1.008.411.411,0,0,0-.514.494Z" transform="translate(-276.206 -73.969)" fill="#242241"/>
+        </g>
+        <g id="Group_1200" data-name="Group 1200" transform="translate(16.229 15.136)">
+          <path id="Path_1938" data-name="Path 1938" d="M273.841,70.609a.412.412,0,0,1-.185-.363,1.194,1.194,0,0,0-.314-.821,1.342,1.342,0,0,0-1.079-.256.411.411,0,0,1-.077-.818,2.1,2.1,0,0,1,1.727.486,2.02,2.02,0,0,1,.561,1.449.41.41,0,0,1-.43.389A.405.405,0,0,1,273.841,70.609Z" transform="translate(-271.813 -68.335)" fill="#242241"/>
+        </g>
+        <path id="Path_1939" data-name="Path 1939" d="M265.3,68.054a8.514,8.514,0,0,0,7.469-3.661c1.192,1.359,1,2.262,1,2.262a3.935,3.935,0,0,0,3.063-1.512c3.065,2.463,1.919,5.227,2.875,8.491,1.309,4.469,5.663,8.413,10.713,6.11a.943.943,0,0,0,.021-1.709,4.156,4.156,0,0,1-1.855-1.777,4.445,4.445,0,0,0,2.707-.408.943.943,0,0,0-.141-1.717c-1.148-.424-2.66-1.568-3.708-4.556-.7-1.989-.186-7.754-2.222-9.992-1.664-1.828-4.4-2.464-7.362-1.711a7.587,7.587,0,0,0-9.452-2.094c-5.855,2.7-6.536,15.22-6.536,15.22S263.927,68.036,265.3,68.054Z" transform="translate(-256.874 -54.937)" fill="#242241"/>
+        <path id="Path_1940" data-name="Path 1940" d="M269.142,79.047a.315.315,0,0,0,.338-.471,22.291,22.291,0,0,1-2.453-5.393.315.315,0,0,0-.576-.055,3.927,3.927,0,0,0,2.691,5.92Z" transform="translate(-256.354 -52.599)" fill="#fff"/>
+        <g id="Group_1202" data-name="Group 1202" transform="translate(8.255 8.935)">
+          <path id="Path_1941" data-name="Path 1941" d="M269.791,65.906a2.569,2.569,0,1,1-2.538-3.06A2.84,2.84,0,0,1,269.791,65.906Z" transform="translate(-264.755 -62.846)" fill="#d77953"/>
+          <g id="Group_1201" data-name="Group 1201" transform="translate(1.557 1.508)">
+            <path id="Path_1942" data-name="Path 1942" d="M266.345,67.339a.376.376,0,0,0,.167.035,1.682,1.682,0,0,0,1.7-1.174,1.791,1.791,0,0,0-.687-1.958.372.372,0,1,0-.41.62,1.06,1.06,0,0,1,.382,1.132.951.951,0,0,1-1,.636.372.372,0,0,0-.15.708Z" transform="translate(-266.133 -64.181)" fill="#c26240"/>
+          </g>
+        </g>
+      </g>
+    </g>
+    <path id="Path_1943" data-name="Path 1943" d="M751.44,239.106H615.4q1.913,0,3.779-.166c-18.4-1.613-32.749-14.873-32.749-30.994h0c0-16.121,14.35-29.382,32.749-30.995q-1.864-.163-3.779-.165c20.174,0,36.528-13.952,36.528-31.161h0c0-17.208-16.354-31.16-36.528-31.16H146.835c-20.174,0-36.528,13.952-36.528,31.16h0c0,17.21,16.354,31.161,36.528,31.161h-9.321c20.174,0,36.528,13.95,36.528,31.16h0c0,17.21-16.354,31.16-36.528,31.16H98.131c-30.377,0-55,21.006-55,46.919h0c0,25.914,24.626,46.92,55,46.92h39.386c20.173,0,36.525,13.952,36.525,31.16h0c0,17.21-16.354,31.16-36.528,31.16h9.321c-20.174,0-36.528,13.95-36.528,31.16h0c0,17.21,16.354,31.16,36.528,31.16H615.4c20.174,0,36.528-13.95,36.528-31.16h0c0-17.21-16.354-31.16-36.528-31.16q1.913,0,3.779-.166c-18.4-1.613-32.749-14.873-32.749-30.994h0c0-16.122,14.35-29.382,32.749-31q-1.862-.163-3.775-.165H751.44c30.377,0,55-21.006,55-46.92h0C806.442,260.112,781.817,239.106,751.44,239.106Z" transform="translate(0 7.72)" fill="#e3e8fd"/>
+    <g id="Group_1205" data-name="Group 1205" transform="translate(79.915 318.34)">
+      <path id="Path_1944" data-name="Path 1944" d="M235.035,439.776s-14.216,20.813-35.209,5.7-18.3-10.735-44.418-10.407-21.081-26.961-15.2-34.1,2.939-20.993-13.855-17.214S91.5,387.113,98.22,366.959s-11.336-25.192-18.055-41.567-6.3-34.848,4.2-36.947,20.573,14.275,29.39,13.855,13.016-15.907,23.513-14.042,10.582,8.163,18.1,24.958,15.913,15.535,26.409,11.757,20.574,1.26,26.032,15.954,7.417,33.17,11.9,34.848S246.732,415.185,235.035,439.776Z" transform="translate(-75.692 -288.103)" fill="#629454"/>
+      <path id="Path_1945" data-name="Path 1945" d="M107.9,315.166s93.09,47.8,122.96,121.1" transform="translate(-71.516 -284.594)" fill="none" stroke="#341f78" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+      <path id="Path_1946" data-name="Path 1946" d="M146.513,348.722c4.826,5.328,6.726,11.469,4.245,13.717s-8.406-.25-13.231-5.578-6.726-11.469-4.245-13.717S141.688,343.393,146.513,348.722Z" transform="translate(-68.365 -281.073)" fill="#3e6a45"/>
+      <path id="Path_1947" data-name="Path 1947" d="M133.41,314.67c2.459,2.459,3.125,5.783,1.484,7.422s-4.963.975-7.422-1.484-3.125-5.783-1.484-7.422S130.951,312.21,133.41,314.67Z" transform="translate(-69.287 -284.967)" fill="#3e6a45"/>
+      <path id="Path_1948" data-name="Path 1948" d="M182.031,343.412c5.124,5.124,7.118,11.438,4.453,14.1s-8.978.671-14.1-4.453-7.118-11.438-4.453-14.1S176.907,338.289,182.031,343.412Z" transform="translate(-63.884 -281.661)" fill="#3e6a45"/>
+      <ellipse id="Ellipse_104" data-name="Ellipse 104" cx="12.596" cy="18.999" rx="12.596" ry="18.999" transform="matrix(0.774, -0.634, 0.634, 0.774, 91.435, 117.169)" fill="#3e6a45"/>
+    </g>
+    <g id="Group_1206" data-name="Group 1206" transform="translate(163.053 273.859)">
+      <path id="Path_1949" data-name="Path 1949" d="M222.934,443.712S194.8,381.2,167.512,338.979s-23.933-85.886,10.077-90.084S240.988,319.852,222.934,443.712Z" transform="translate(-149.286 -248.728)" fill="#4958ed"/>
+      <path id="Path_1950" data-name="Path 1950" d="M181.479,274.521s40.219,73.9,37.281,165.846" transform="translate(-145.112 -245.383)" fill="none" stroke="#341f78" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+      <path id="Path_1951" data-name="Path 1951" d="M178.253,287.772c2.575,7.124,1.716,13.963-1.919,15.277s-8.668-3.4-11.243-10.521-1.715-13.964,1.919-15.277S175.679,280.647,178.253,287.772Z" transform="translate(-147.429 -245.058)" fill="#3e50ce"/>
+      <path id="Path_1952" data-name="Path 1952" d="M190.159,317.594c1.613,4.462,1.054,8.755-1.249,9.588s-5.479-2.111-7.091-6.574-1.053-8.755,1.251-9.588S188.547,313.13,190.159,317.594Z" transform="translate(-145.187 -240.668)" fill="#3e50ce"/>
+      <ellipse id="Ellipse_105" data-name="Ellipse 105" cx="5.713" cy="13.506" rx="5.713" ry="13.506" transform="matrix(0.94, -0.34, 0.34, 0.94, 50.834, 46.438)" fill="#3e50ce"/>
+      <path id="Path_1953" data-name="Path 1953" d="M197.984,346.067c.966,2.276.644,4.591-.718,5.168s-3.249-.8-4.215-3.077-.643-4.592.72-5.169S197.019,343.79,197.984,346.067Z" transform="translate(-143.683 -236.521)" fill="#3e50ce"/>
+    </g>
+    <g id="Group_1207" data-name="Group 1207" transform="translate(182.102 417.067)">
+      <path id="Path_1954" data-name="Path 1954" d="M167.57,440.956s-4.779-6.371,3.186-14.336c0,0-4.606-26.974,22.9-30.606,0,0,5.19-18.164,20.759-20.24s28.024,7.785,31.657,21.278c0,0,11.936-4.152,22.834,3.115s9.861,22.316,9.861,22.316,11.936,4.255,7.265,18.475Z" transform="translate(-166.148 -375.497)" fill="#98a3f4"/>
+      <path id="Path_1955" data-name="Path 1955" d="M219.646,411.246s-8.766,0-10.56-15.269c-.927-7.9,2.458-15.132,5.943-20.282-.207.024-.408.026-.615.053-15.569,2.076-20.759,20.24-20.759,20.24-27.505,3.632-22.9,30.606-22.9,30.606-7.964,7.964-3.186,14.336-3.186,14.336h50.109C203.556,426.1,219.646,411.246,219.646,411.246Z" transform="translate(-166.148 -375.472)" fill="#808fd8"/>
+    </g>
+    <g id="Group_1208" data-name="Group 1208" transform="translate(605.768 318.34)">
+      <path id="Path_1956" data-name="Path 1956" d="M544.508,439.776s14.216,20.813,35.21,5.7,18.3-10.735,44.418-10.407,21.081-26.961,15.2-34.1-2.938-20.993,13.856-17.214,34.849,3.359,28.131-16.795,11.336-25.192,18.055-41.567,6.3-34.848-4.2-36.947S674.607,302.72,665.79,302.3s-13.016-15.907-23.513-14.042-10.582,8.163-18.1,24.958-15.911,15.535-26.408,11.757-20.573,1.26-26.031,15.954-7.417,33.17-11.9,34.848S532.811,415.185,544.508,439.776Z" transform="translate(-541.181 -288.103)" fill="#629454"/>
+      <path id="Path_1957" data-name="Path 1957" d="M667.087,315.166s-93.091,47.8-122.961,121.1" transform="translate(-540.799 -284.594)" fill="none" stroke="#341f78" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+      <ellipse id="Ellipse_106" data-name="Ellipse 106" cx="13.016" cy="6.062" rx="13.016" ry="6.062" transform="translate(75.785 77.296) rotate(-47.832)" fill="#3e6a45"/>
+      <path id="Path_1958" data-name="Path 1958" d="M628.69,314.67c-2.459,2.459-3.125,5.783-1.484,7.422s4.963.975,7.422-1.484,3.124-5.783,1.484-7.422S631.149,312.21,628.69,314.67Z" transform="translate(-530.142 -284.967)" fill="#3e6a45"/>
+      <path id="Path_1959" data-name="Path 1959" d="M581.241,343.412c-5.124,5.124-7.118,11.438-4.454,14.1s8.979.671,14.1-4.453,7.118-11.438,4.453-14.1S586.364,338.289,581.241,343.412Z" transform="translate(-536.717 -281.661)" fill="#3e6a45"/>
+      <path id="Path_1960" data-name="Path 1960" d="M576.99,391.708c-6.648,8.118-7.675,18.271-2.293,22.679s15.134,1.4,21.782-6.717,7.675-18.273,2.293-22.681S583.638,383.59,576.99,391.708Z" transform="translate(-537.282 -275.802)" fill="#3e6a45"/>
+    </g>
+    <g id="Group_1209" data-name="Group 1209" transform="translate(606.16 273.859)">
+      <path id="Path_1961" data-name="Path 1961" d="M547.022,443.712s28.131-62.512,55.422-104.733,23.932-85.886-10.077-90.084S528.967,319.852,547.022,443.712Z" transform="translate(-541.528 -248.728)" fill="#4958ed"/>
+      <path id="Path_1962" data-name="Path 1962" d="M583.689,274.521s-40.22,73.9-37.281,165.846" transform="translate(-540.915 -245.383)" fill="none" stroke="#341f78" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+      <path id="Path_1963" data-name="Path 1963" d="M584.468,287.772c-2.575,7.124-1.715,13.963,1.919,15.277s8.669-3.4,11.244-10.521,1.715-13.964-1.919-15.277S587.043,280.647,584.468,287.772Z" transform="translate(-536.152 -245.058)" fill="#3e50ce"/>
+      <path id="Path_1964" data-name="Path 1964" d="M571.88,317.594c-1.612,4.462-1.053,8.755,1.251,9.588s5.478-2.111,7.091-6.574,1.053-8.755-1.251-9.588S573.493,313.13,571.88,317.594Z" transform="translate(-537.711 -240.668)" fill="#3e50ce"/>
+      <path id="Path_1965" data-name="Path 1965" d="M553.206,298.894c-2.536,7.014-2.186,13.571.782,14.643s7.428-3.745,9.963-10.76,2.186-13.571-.782-14.643S555.741,291.879,553.206,298.894Z" transform="translate(-540.233 -243.637)" fill="#3e50ce"/>
+      <path id="Path_1966" data-name="Path 1966" d="M563.58,346.067c-.965,2.276-.643,4.591.72,5.168s3.249-.8,4.215-3.077.643-4.592-.72-5.169S564.546,343.79,563.58,346.067Z" transform="translate(-538.74 -236.521)" fill="#3e50ce"/>
+    </g>
+    <g id="Group_1210" data-name="Group 1210" transform="translate(545.285 417.067)">
+      <path id="Path_1967" data-name="Path 1967" d="M607.187,440.956s4.779-6.371-3.187-14.336c0,0,4.607-26.974-22.9-30.606,0,0-5.19-18.164-20.759-20.24s-28.024,7.785-31.657,21.278c0,0-11.936-4.152-22.835,3.115s-9.86,22.316-9.86,22.316-11.936,4.255-7.266,18.475Z" transform="translate(-487.641 -375.497)" fill="#98a3f4"/>
+      <path id="Path_1968" data-name="Path 1968" d="M547.366,411.246s8.766,0,10.559-15.269c.927-7.9-2.457-15.132-5.942-20.282.207.024.407.026.615.053,15.569,2.076,20.759,20.24,20.759,20.24,27.505,3.632,22.9,30.606,22.9,30.606,7.965,7.964,3.187,14.336,3.187,14.336H549.333C563.456,426.1,547.366,411.246,547.366,411.246Z" transform="translate(-479.896 -375.472)" fill="#808fd8"/>
+    </g>
+    <rect id="Rectangle_665" data-name="Rectangle 665" width="393.833" height="264.515" rx="16.423" transform="translate(227.869 166.691)" fill="#2b284f"/>
+    <rect id="Rectangle_666" data-name="Rectangle 666" width="377.087" height="253.267" rx="16.423" transform="translate(236.242 172.314)" fill="#fff"/>
+    <rect id="Rectangle_667" data-name="Rectangle 667" width="358.564" height="11.756" transform="translate(242.984 189.363)" fill="#d2d9ff"/>
+    <rect id="Rectangle_668" data-name="Rectangle 668" width="212.451" height="5.038" transform="translate(316.04 364.027)" fill="#d2d9ff"/>
+    <rect id="Rectangle_669" data-name="Rectangle 669" width="212.451" height="5.038" transform="translate(316.04 377.043)" fill="#d2d9ff"/>
+    <rect id="Rectangle_670" data-name="Rectangle 670" width="212.451" height="5.038" transform="translate(316.04 390.059)" fill="#d2d9ff"/>
+    <rect id="Rectangle_671" data-name="Rectangle 671" width="69.978" height="29.391" transform="translate(387.277 431.205)" fill="#e9efff"/>
+    <path id="Rectangle_672" data-name="Rectangle 672" d="M7.307,0H82.963a7.307,7.307,0,0,1,7.307,7.307v2.11a0,0,0,0,1,0,0H0a0,0,0,0,1,0,0V7.307A7.307,7.307,0,0,1,7.307,0Z" transform="translate(377.131 460.596)" fill="#7da2ff"/>
+    <g id="Group_1211" data-name="Group 1211" transform="translate(564.88 294.749)">
+      <path id="Path_1969" data-name="Path 1969" d="M505.606,274.261v39.982a1.75,1.75,0,0,0,1.75,1.749h0a1.75,1.75,0,0,0,1.75-1.749V294.858a3.218,3.218,0,0,1,3.218-3.218h0a3.218,3.218,0,0,1,3.218,3.218v26.673a3.919,3.919,0,0,0,3.919,3.919h0a3.919,3.919,0,0,0,3.919-3.919V296.468a3.708,3.708,0,0,1,3.709-3.709h0a3.708,3.708,0,0,1,3.709,3.709h0a3.388,3.388,0,0,0,3.388,3.388h1.3a4.689,4.689,0,0,0,4.688-4.689V274.261Z" transform="translate(-504.907 -266.308)" fill="#f2c73c"/>
+      <rect id="Rectangle_673" data-name="Rectangle 673" width="36.948" height="7.954" rx="1.767" fill="#ffda73"/>
+    </g>
+    <g id="Group_1212" data-name="Group 1212" transform="translate(583.168 302.703)">
+      <path id="Path_1970" data-name="Path 1970" d="M593.112,293.857s-2.379,9.236-3.5,14.695,8.537,7.7,8.537,7.7l-.839,4.758s5.318-.28,7,2.379l2.659-10.776s2.8-2.939,2.24-6.578-4.339-3.218-5.6,0c0,0-4.215-4.478-4.207-10.5C599.4,295.536,596.612,297.075,593.112,293.857Z" transform="translate(-512.312 -271.72)" fill="#e5827c"/>
+      <path id="Path_1971" data-name="Path 1971" d="M614.925,296.414s1.26-3.639-1.26-6.3-7.417-2.8-11.2-2.24a21.739,21.739,0,0,1-7.277-1.4c-3.779-1.26-7.838,0-8.677,3.919s5.814,9.187,5.814,9.187h0c.664-2.693,1.183-4.707,1.183-4.707,3.5,3.218,6.29,1.679,6.29,1.679-.008,6.019,4.207,10.5,4.207,10.5,1.26-3.218,5.038-3.639,5.6,0s-2.24,6.578-2.24,6.578,7-3.639,8.677-8.677A9.414,9.414,0,0,0,614.925,296.414Z" transform="translate(-512.712 -272.738)" fill="#bc4d88"/>
+      <path id="Path_1972" data-name="Path 1972" d="M602.345,319.642s-7.838-.7-13.856-1.959-35.268-13.3-35.268-13.3a9.759,9.759,0,0,0-2.519,5.879S569.456,323,576.523,325.8a114.978,114.978,0,0,1,15.185,7.838s-.559,21.693,0,29.391.56,10.357.56,10.357,13.435,1.26,23.932-2.1c0,0-1.112-26.451-1.885-33.729s-4.973-15.535-4.973-15.535A7.066,7.066,0,0,0,602.345,319.642Z" transform="translate(-517.347 -270.355)" fill="#f2c73c"/>
+      <path id="Path_1973" data-name="Path 1973" d="M589.98,341.654c.072-6.115.2-11.2.2-11.2s-1-.621-2.59-1.539c-.007.006-9.866,8.537-10.565,8.676s-9.8-8.677-9.8-8.677a20.956,20.956,0,0,0-4.759,3.08s10.217,15.535,13.3,16.235,14.212-6.577,14.212-6.577Z" transform="translate(-515.82 -267.174)" fill="#d3a629"/>
+      <path id="Path_1974" data-name="Path 1974" d="M565.518,322.361A73.854,73.854,0,0,0,568,330.129a18.056,18.056,0,0,0-4.759,3.08,14.979,14.979,0,0,1-5.178-5.424c-1.994-3.639-2.623-4.688,1.575-6.892S564.647,319.3,565.518,322.361Z" transform="translate(-516.592 -268.385)" fill="#e5827c"/>
+      <path id="Path_1975" data-name="Path 1975" d="M587,330.28l4.059,2.344L587,335.144Z" transform="translate(-512.639 -266.997)" fill="#d3a629"/>
+      <path id="Path_1976" data-name="Path 1976" d="M574.055,429.082l2.834,10.5s2.2,2.939,6.822.735l-2.1-11.231Z" transform="translate(-514.318 -254.184)" fill="#e5827c"/>
+      <path id="Path_1977" data-name="Path 1977" d="M566.157,446.246s.63-1.68,4.2-2.414,7.557-5.459,7.557-5.459,2.309,3.044,6.822.735c0,0,1.575,4.2,1.26,7.137C586,446.246,566.891,448.765,566.157,446.246Z" transform="translate(-515.342 -252.98)"/>
+      <path id="Path_1978" data-name="Path 1978" d="M608.941,428.313l2.834,10.5s2.2,2.938,6.823.734l-1.832-12.692Z" transform="translate(-509.794 -254.474)" fill="#e5827c"/>
+      <path id="Path_1979" data-name="Path 1979" d="M601.043,445.31s.63-1.68,4.2-2.415,7.557-5.458,7.557-5.458,2.309,3.043,6.823.734c0,0,1.574,4.2,1.26,7.138C620.882,445.31,601.778,447.829,601.043,445.31Z" transform="translate(-510.818 -253.101)"/>
+      <path id="Path_1980" data-name="Path 1980" d="M611.838,438.983a31.883,31.883,0,0,0,7.7-2.519s-5.543-32.33-7.7-41.147-4.681-21.623-4.681-21.623l-15.745,18.894S608.542,426.806,611.838,438.983Z" transform="translate(-512.067 -261.367)" fill="#211d35"/>
+      <path id="Path_1981" data-name="Path 1981" d="M613.793,363.606c-10.5,3.36-23.932,2.1-23.932,2.1s-19.174,36.807-20.434,42.476,5.249,29.391,5.249,29.391,3.989,2.519,7.347.839c0,0-.629-23.722.21-28.341s17.844-21.832,26.031-30.44S613.793,363.606,613.793,363.606Z" transform="translate(-514.939 -262.675)" fill="#2b284f"/>
+      <path id="Path_1982" data-name="Path 1982" d="M521.176,274.261l44.272,57.422,2.722-2.256-41.509-55.166Z" transform="translate(-521.176 -274.261)" fill="#f4f3fe"/>
+      <path id="Path_1983" data-name="Path 1983" d="M554.816,305.315s-4.374-3.043-6.368-4.2a25.659,25.659,0,0,1-4.513-3.884s-.315,2.1-1.26,2.519-3.884,1.365-4.2,2.2.524,2.519.839,3.359-.419,2.065.21,2.869.315,2.274,1.365,2.379,7.032-.105,8.5,0a12.227,12.227,0,0,1,2.9.63A9.072,9.072,0,0,1,554.816,305.315Z" transform="translate(-518.941 -271.282)" fill="#e5827c"/>
+      <path id="Path_1984" data-name="Path 1984" d="M562.867,330.378s-2.573-3.183,0-5.143c0,0-4.338.21-3.289-1.26a8.731,8.731,0,0,1,5.125-3.08l2.3,7.493Z" transform="translate(-516.217 -268.214)" fill="#e5827c"/>
+    </g>
+    <g id="Group_1213" data-name="Group 1213" transform="translate(284.909 201.119)">
+      <rect id="Rectangle_674" data-name="Rectangle 674" width="233.168" height="132.117" transform="translate(27.348 0) rotate(11.946)" fill="#98a3f4"/>
+      <rect id="Rectangle_675" data-name="Rectangle 675" width="52.063" height="114.34" transform="translate(36.73 11.418) rotate(11.946)" fill="#808fd8"/>
+      <rect id="Rectangle_676" data-name="Rectangle 676" width="144.168" height="13.009" transform="translate(100.378 28.807) rotate(11.946)" fill="#808fd8"/>
+      <rect id="Rectangle_677" data-name="Rectangle 677" width="144.168" height="13.01" transform="matrix(0.978, 0.207, -0.207, 0.978, 95.586, 51.454)" fill="#808fd8"/>
+      <rect id="Rectangle_678" data-name="Rectangle 678" width="144.168" height="13.009" transform="matrix(0.978, 0.207, -0.207, 0.978, 90.685, 74.621)" fill="#808fd8"/>
+      <rect id="Rectangle_679" data-name="Rectangle 679" width="144.168" height="13.009" transform="translate(85.454 99.344) rotate(11.946)" fill="#808fd8"/>
+    </g>
+    <g id="Group_1214" data-name="Group 1214" transform="translate(243.399 74.966)">
+      <path id="Path_1985" data-name="Path 1985" d="M289.056,107.063a82.89,82.89,0,0,1-9.032-1.147,20.165,20.165,0,0,1-2.412,5.849,16.714,16.714,0,0,0,7.006,4.581c4.4,1.449,5.68,1.927,7.246-3.13S292.6,107.395,289.056,107.063Z" transform="translate(-212.992 -68.355)" fill="#e5827c"/>
+      <path id="Path_1986" data-name="Path 1986" d="M226.542,93.929S250.681,71.636,261.228,72.7c0,0,5.625.835,6.562,6.46L269.9,101.9l11.883,15.936s-.868,4.218-3.914,4.922c0,0-15.7-12.891-16.64-15.936s-1.64-10.339-1.64-10.339-5.625,1.9-7.969,5.886-2.812,9.609-2.812,9.609S224.667,107.991,226.542,93.929Z" transform="translate(-219.628 -72.667)" fill="#c52a52"/>
+      <path id="Path_1987" data-name="Path 1987" d="M247.357,107.788s12.421,11.249,17.108,15.468,5.625,30.935,5.625,30.935-1.874,2.11-6.562,1.173c0,0-4.218-11.718-4.8-21.562l-20.037-11.483-1.066-17.36Z" transform="translate(-218.178 -68.48)" fill="#7d8dd6"/>
+      <path id="Path_1988" data-name="Path 1988" d="M239.851,106.7h0c-6.461-2.623-13.578-7.336-12.527-15.216a21.283,21.283,0,0,0-6.8,17.812c1.171,11.249,12.421,22.967,12.421,22.967-4.687,7.969-8.905,28.123-8.905,28.123.234,3.984,5.39,2.813,5.39,2.813s16.874-26.249,15.936-30.936S239.851,106.7,239.851,106.7Z" transform="translate(-220.41 -70.226)" fill="#4f64c7"/>
+      <path id="Path_1989" data-name="Path 1989" d="M256.274,94.847V85.264l-4.283,11.767A25.908,25.908,0,0,1,256.274,94.847Z" transform="translate(-216.314 -71.033)" fill="#772c4c"/>
+      <path id="Path_1990" data-name="Path 1990" d="M264.91,98.542l10.269,13.772,3.558.993a13.709,13.709,0,0,0,3.047-7.518Z" transform="translate(-214.639 -69.312)" fill="#772c4c"/>
+      <path id="Path_1991" data-name="Path 1991" d="M223.836,152.481s-2.344,3.047-1.719,8.516c0,0,11.718,1.718,16.718.781a55.629,55.629,0,0,0-9.609-6.483S224.772,156.778,223.836,152.481Z" transform="translate(-220.202 -62.317)"/>
+      <path id="Path_1992" data-name="Path 1992" d="M260.553,149.712v6.254s9.531,1.645,17.5,0a18.545,18.545,0,0,0-6.562-4.145c-3.751-1.251-4.375-3.282-4.375-3.282S264.772,150.414,260.553,149.712Z" transform="translate(-215.204 -62.828)"/>
+      <path id="Path_1993" data-name="Path 1993" d="M271.964,117.571s2.421,3.281,4.609,3.436,1.874,1.562,3.594,1.719,2.812.156,4.218-1.875.469.156,1.406-2.031-9.913-6.171-9.913-6.171A9.4,9.4,0,0,1,271.964,117.571Z" transform="translate(-213.724 -67.482)" fill="#e5827c"/>
+      <line id="Line_78" data-name="Line 78" y1="92.996" transform="translate(72.237 39.184)" fill="none" stroke="#98a3f4" stroke-miterlimit="10" stroke-width="1"/>
+      <path id="Path_1994" data-name="Path 1994" d="M280.2,111.183s4.017,2.177,5.645-1.046c0,0,.652,4.8,2.052,3.354a9.749,9.749,0,0,0,2.338-6.253l-8.693-1Z" transform="translate(-212.657 -68.314)" fill="#e5827c"/>
+    </g>
+    <g id="Group_1215" data-name="Group 1215" transform="translate(543.972 460.596)">
+      <rect id="Rectangle_680" data-name="Rectangle 680" width="26.67" height="37.148" transform="translate(1.979 1.619)" fill="#a3a3a3"/>
+      <path id="Path_1995" data-name="Path 1995" d="M488.231,452.611H514.9l-26.67-37.148Z" transform="translate(-486.252 -413.843)" fill="#d3d3d3"/>
+      <path id="Path_1996" data-name="Path 1996" d="M488.648,414.029h25.993a1.726,1.726,0,0,1,1.726,1.727v11.513s-.19,3.62-2.857,2.1-1.429-6.292-3.049-7.48c-1.985-1.456-5.833,3.6-4.166,8.059,1.038,2.781-.618,5.084-3.548,4.61-4.393-.709-2.412-9.774-4.382-11.952-1.81-2-5.429-1.524-6.1,4.381s-4,7.049-5.239,5.906c-1.008-.931-.374-12.848-.1-17.245A1.72,1.72,0,0,1,488.648,414.029Z" transform="translate(-486.479 -414.029)" fill="#f2c73c"/>
+    </g>
+    <g id="Group_1223" data-name="Group 1223" transform="translate(235.733 235.853)">
+      <g id="Group_1216" data-name="Group 1216">
+        <path id="Path_1997" data-name="Path 1997" d="M215.559,470.312c-.067,0-.133,0-.2-.01a1.934,1.934,0,0,1-1.726-2.12l25.751-251.359a1.933,1.933,0,1,1,3.847.394L217.48,468.577A1.934,1.934,0,0,1,215.559,470.312Z" transform="translate(-213.623 -215.085)" fill="#341f78"/>
+      </g>
+      <g id="Group_1217" data-name="Group 1217" transform="translate(52.623 0.002)">
+        <path id="Path_1998" data-name="Path 1998" d="M287.888,470.312a1.933,1.933,0,0,1-1.92-1.735l-25.752-251.36a1.933,1.933,0,1,1,3.847-.394l25.751,251.359a1.933,1.933,0,0,1-1.726,2.12C288.02,470.307,287.953,470.312,287.888,470.312Z" transform="translate(-260.205 -215.087)" fill="#341f78"/>
+      </g>
+      <g id="Group_1218" data-name="Group 1218" transform="translate(23.038 27.363)">
+        <path id="Path_1999" data-name="Path 1999" d="M268.227,243.173H235.95a1.933,1.933,0,1,1,0-3.866h32.277a1.933,1.933,0,1,1,0,3.866Z" transform="translate(-234.016 -239.307)" fill="#341f78"/>
+      </g>
+      <g id="Group_1219" data-name="Group 1219" transform="translate(19.574 60.298)">
+        <path id="Path_2000" data-name="Path 2000" d="M272.11,272.328H232.884a1.933,1.933,0,1,1,0-3.866H272.11a1.933,1.933,0,0,1,0,3.866Z" transform="translate(-230.95 -268.462)" fill="#341f78"/>
+      </g>
+      <g id="Group_1220" data-name="Group 1220" transform="translate(15.335 101.672)">
+        <path id="Path_2001" data-name="Path 2001" d="M276.966,308.953H229.131a1.933,1.933,0,0,1,0-3.867h47.835a1.933,1.933,0,0,1,0,3.867Z" transform="translate(-227.198 -305.086)" fill="#341f78"/>
+      </g>
+      <g id="Group_1221" data-name="Group 1221" transform="translate(10.56 148.282)">
+        <path id="Path_2002" data-name="Path 2002" d="M282.053,350.213H224.9a1.933,1.933,0,0,1,0-3.867h57.149a1.933,1.933,0,0,1,0,3.867Z" transform="translate(-222.971 -346.346)" fill="#341f78"/>
+      </g>
+      <g id="Group_1222" data-name="Group 1222" transform="translate(3.786 214.406)">
+        <path id="Path_2003" data-name="Path 2003" d="M289.619,408.745H218.908a1.933,1.933,0,1,1,0-3.866h70.711a1.933,1.933,0,0,1,0,3.866Z" transform="translate(-216.974 -404.879)" fill="#341f78"/>
+      </g>
+    </g>
+    <circle id="Ellipse_107" data-name="Ellipse 107" cx="15.19" cy="15.19" r="15.19" transform="matrix(0.932, -0.364, 0.364, 0.932, 98.192, 201.802)" fill="#d2d9ff"/>
+    <circle id="Ellipse_108" data-name="Ellipse 108" cx="13.374" cy="13.374" r="13.374" transform="translate(636.776 218.54) rotate(-76.649)" fill="#d2d9ff"/>
+    <circle id="Ellipse_109" data-name="Ellipse 109" cx="8.502" cy="8.502" r="8.502" transform="translate(768.439 369.065)" fill="#d2d9ff"/>
+    <circle id="Ellipse_110" data-name="Ellipse 110" cx="13.089" cy="13.089" r="13.089" transform="translate(55.645 374.201)" fill="#d2d9ff"/>
+  </g>
+</svg>

src/assets/icons/refresh (1).svg

@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="23.675" height="23.692" viewBox="0 0 23.675 23.692">
+  <g id="refresh_1_" data-name="refresh (1)" transform="translate(-0.175 0)">
+    <g id="Group_384" data-name="Group 384" transform="translate(0.175 0)">
+      <g id="Group_383" data-name="Group 383" transform="translate(0 0)">
+        <path id="Path_143" data-name="Path 143" d="M8.641.494a11.837,11.837,0,0,0-6.5,4.817,3.219,3.219,0,0,0-.387,1.231V2.383H.175V8.7H6.488V7.118H2.921a10.4,10.4,0,0,1,9.091-5.6,10.393,10.393,0,0,1,9.833,7.4l1.515-.45A11.837,11.837,0,0,0,8.641.494Z" transform="translate(-0.175 0)" fill="#fff"/>
+      </g>
+    </g>
+    <g id="Group_386" data-name="Group 386" transform="translate(0.664 14.789)">
+      <g id="Group_385" data-name="Group 385" transform="translate(0)">
+        <path id="Path_144" data-name="Path 144" d="M26.967,300.063v1.578h3.567a10.4,10.4,0,0,1-9.091,5.6,10.393,10.393,0,0,1-9.833-7.4l-1.515.45A11.837,11.837,0,0,0,31.45,303.22a2.17,2.17,0,0,0,.253-1v4.159H33.28v-6.313Z" transform="translate(-10.095 -299.842)" fill="#fff"/>
+      </g>
+    </g>
+  </g>
+</svg>

src/assets/icons/star.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="21.222" height="21.19" viewBox="0 0 21.222 21.19">
+  <path id="star" d="M20.658,7.592l-6.524-1L11.21.367a.69.69,0,0,0-1.2,0L7.087,6.6l-6.524,1A.663.663,0,0,0,.189,8.711l4.739,4.858-1.12,6.868a.664.664,0,0,0,.975.687l5.827-3.22,5.827,3.221a.664.664,0,0,0,.975-.687l-1.12-6.868,4.739-4.858a.664.664,0,0,0-.374-1.119Z" transform="translate(0 -0.018)" fill="#ffc107"/>
+</svg>

src/assets/scss/_mixin.scss

@@ -0,0 +1,572 @@
+@mixin flex($direction,$wrap,$align,$justify){
+    display: -webkit-box;
+    display: -moz-box;
+    display: -ms-flexbox;
+    display: -webkit-flex;
+    display: flex;
+  
+    // row | row-reverse | column | column-reverse
+    -webkit-flex-direction: $direction;
+    -moz-flex-direction: $direction;
+    -ms-flex-direction: $direction;
+    flex-direction: $direction;
+  
+    // nowrap | wrap | wrap-reverse
+    -webkit-flex-wrap: $wrap;
+    -moz-flex-wrap: $wrap;
+    -ms-flex-wrap: $wrap;
+    flex-wrap: $wrap;
+  
+    // flex-start | flex-end | center | baseline | stretch
+    -webkit-align-items: $align;
+    -moz-align-items: $align;
+    -ms-align-items: $align;
+    -ms-flex-align: $align;
+    align-items: $align;
+    // flex-start | flex-end | center | space-between | space-around
+    -webkit-justify-content: $justify;
+    -moz-justify-content: $justify;
+    -ms-justify-content: $justify;
+    justify-content: $justify;
+    -ms-flex-pack: $justify;
+  }
+  @mixin flex-grow($grow) {
+    -webkit-flex-grow: $grow;
+    -moz-flex-grow: $grow;
+    -ms-flex-grow: $grow;
+    flex-grow: $grow;
+  }
+  @mixin align-self($align) {
+    -webkit-align-self: $align;
+    -moz-align-self: $align;
+    -ms-align-self: $align;
+    align-self: $align;
+  }
+  @mixin transition{
+    -webkit-transition:all .3s,width .3s,opacity .4s,border .1s,margin 0s,background .3s,width .5s,height .5s;
+    -moz-transition: all .3s,width .3s,opacity .4s,border .1s,margin 0s,background .3s,width .5s,height .5s;
+    -ms-transition:all .3s,width .3s,opacity .4s,border .1s,margin 0s,background .3s,width .5s,height .5s;
+    -o-transition: all .3s,width .3s,opacity .4s,border .1s,margin 0s,background .3s,width .5s,height .5s;
+    transition: all .3s,width .3s,opacity .4s,border .1s,margin 0s,background .3s,width .5s,height .5s;
+  }
+  @mixin transition($args...) {
+    -webkit-transition: $args;
+    -moz-transition: $args;
+    -ms-transition: $args;
+    -o-transition: $args;
+    transition: $args;
+  }
+  /*@mixin transform($degree){
+    -moz-transform: rotate($degree);
+    -ms-transform: rotate($degree);
+    -o-transform: rotate($degree);
+    -webkit-transform: rotate($degree);
+    transform: rotate($degree);
+  }*/
+  @mixin media-max($break-large){
+    @media screen and (max-width: $break-large) {
+      @content
+    }
+  }
+  @mixin media-min($break-large){
+    @media screen and (min-width: $break-large) {
+      @content
+    }
+  }
+  @mixin media-height-max($break-large){
+    @media screen and (max-height: $break-large) {
+      @content
+    }
+  }
+  @mixin media-height-min($break-large){
+    @media screen and (min-height: $break-large) {
+      @content
+    }
+  }
+  
+  
+  
+  @mixin font-source-sans($size: false, $colour: false, $weight: false,  $lh: false) {
+    @if $size { font-size: $size; }
+    @if $colour { color: $colour; }
+    @if $weight { font-weight: $weight; }
+    @if $lh { line-height: $lh; }
+  }
+  @mixin input-placeholder {
+    &.placeholder { @content; }
+    &:-moz-placeholder { @content; }
+    &::-moz-placeholder { @content; }
+    &:-ms-input-placeholder { @content; }
+    &::-webkit-input-placeholder { @content; }
+  }
+  /*
+  input,
+  textarea {
+    @include input-placeholder {
+      color: $grey;
+    }
+  }
+  */
+  @mixin opacity($opacity) {
+    opacity: $opacity;
+    $opacity-ie: $opacity * 100;
+    filter: alpha(opacity = $opacity-ie); //IE8
+  }
+  @mixin keyframes($name) {
+    @-webkit-keyframes #{$name} {
+      @content;
+    }
+  
+    @-moz-keyframes #{$name} {
+      @content;
+    }
+  
+    @keyframes #{$name} {
+      @content;
+    }
+  }
+  @mixin gradient( $orientation,$start-color, $end-color) {
+    background: $start-color;
+    @if $orientation == 'vertical' {
+      background: -webkit-linear-gradient(top, $start-color, $end-color);
+      background: linear-gradient(to bottom, $start-color, $end-color);
+    } @else if $orientation == 'horizontal' {
+      background: -webkit-linear-gradient(left, $start-color, $end-color);
+      background: linear-gradient(to right, $start-color, $end-color);
+    } @else {
+      background: -webkit-radial-gradient(center, ellipse cover, $start-color, $end-color);
+      background: radial-gradient(ellipse at center, $start-color, $end-color);
+    }
+  }
+  @mixin radius($border-radius){
+    -webkit-border-radius:$border-radius;
+    -moz-border-radius: $border-radius;
+    border-radius: $border-radius;
+  }
+  @mixin box-shadow($value) {
+    -webkit-box-shadow:$value;
+    -moz-box-shadow: $value;
+    box-shadow: $value;
+  }
+  @mixin animation ($delay, $duration) {
+    -webkit-animation-delay: $delay;
+    -webkit-animation-duration: $duration;
+    /*-webkit-animation-name: $animation;*/
+    -webkit-animation-fill-mode: both; /* this prevents the animation from restarting! */
+  
+    -moz-animation-delay: $delay;
+    -moz-animation-duration: $duration;
+    /*  -moz-animation-name: $animation;*/
+    -moz-animation-fill-mode: both; /* this prevents the animation from restarting! */
+  
+    -o-animation-delay: $delay;
+    -o-animation-duration: $duration;
+    /* -o-animation-name: $animation;*/
+    -o-animation-fill-mode:both; /* this prevents the animation from restarting! */
+  
+    animation-delay: $delay;
+    animation-duration: $duration;
+    /*  animation-name: $animation;*/
+    animation-fill-mode: both; /* this prevents the animation from restarting! */
+  
+  }
+  @mixin animations($delay, $duration , $animation,$count,$timing) {
+    -webkit-animation-delay: $delay;
+    -webkit-animation-duration: $duration;
+    -webkit-animation-name: $animation;
+    -webkit-animation-timing-function:$timing;
+    -webkit-animation-fill-mode: both; /* this prevents the animation from restarting! */
+    -webkit-animation-iteration-count:$count ;
+    -moz-animation-delay: $delay;
+    -moz-animation-duration: $duration;
+    -moz-animation-name: $animation;
+    -moz-animation-timing-function:$timing;
+    -moz-animation-fill-mode: both; /* this prevents the animation from restarting! */
+    -moz-animation-iteration-count:$count ;
+    -o-animation-delay: $delay;
+    -o-animation-duration: $duration;
+    -o-animation-name: $animation;
+    -o-animation-timing-function:$timing;
+    -o-animation-fill-mode:both; /* this prevents the animation from restarting! */
+    -o-animation-iteration-count:$count ;
+  
+    animation-delay: $delay;
+    animation-duration: $duration;
+    animation-name: $animation;
+    animation-timing-function:$timing;
+    animation-fill-mode: both; /* this prevents the animation from restarting! */
+    animation-iteration-count:$count ;
+  
+  }
+  @mixin animation3($delay, $duration ,$count) {
+    -webkit-animation-delay: $delay;
+    -webkit-animation-duration: $duration;
+    -webkit-animation-fill-mode: both; /* this prevents the animation from restarting! */
+    -webkit-animation-iteration-count:$count ;
+    -moz-animation-delay: $delay;
+    -moz-animation-duration: $duration;
+    -moz-animation-fill-mode: both; /* this prevents the animation from restarting! */
+    -moz-animation-iteration-count:$count ;
+    -o-animation-delay: $delay;
+    -o-animation-duration: $duration;
+    -o-animation-fill-mode:both; /* this prevents the animation from restarting! */
+    -o-animation-iteration-count:$count ;
+  
+    animation-delay: $delay;
+    animation-duration: $duration;
+    animation-fill-mode: both; /* this prevents the animation from restarting! */
+    animation-iteration-count:$count ;
+  
+  }
+  @mixin keyframe{
+    -webkit-animation-name: op;
+    -moz-animation-name:op;
+    -o-animation-name: op;
+    animation-name: op;
+    @-webkit-keyframes op {
+      0% {
+        opacity: 0;
+      }
+  
+      100% {
+        opacity: 1;
+      }
+    }
+  
+    @-moz-keyframes op{
+      0% {
+        opacity: 0;
+      }
+  
+      100% {
+        opacity: 1;
+      }
+    }
+  
+    @-o-keyframes op {
+      0% {
+        opacity: 0;
+      }
+  
+      100% {
+        opacity: 1;
+      }
+    }
+  
+    @keyframes op {
+      0% {
+        opacity: 0;
+      }
+  
+      100% {
+        opacity: 1;
+      }
+    }
+  }
+  @mixin keyframe-rotate{
+    -webkit-animation-name: l;
+    -moz-animation-name:l;
+    -o-animation-name: l;
+    animation-name: l;
+    @-webkit-keyframes l {
+      0% {
+        @include transform(0deg);
+      }
+  
+      100% {
+        @include transform(360deg);
+      }
+    }
+  
+    @-moz-keyframes l{
+      0% {
+        @include transform(0deg);
+      }
+  
+      100% {
+        @include transform(360deg);
+      }
+    }
+  
+    @-o-keyframes l {
+      0% {
+        @include transform(0deg);
+      }
+  
+      100% {
+        @include transform(360deg);
+      }
+    }
+  
+    @keyframes l {
+      0% {
+        @include transform(0deg);
+      }
+  
+      100% {
+        @include transform(360deg);
+      }
+    }
+  }
+  @mixin ripple{
+    -webkit-animation-name: l1;
+    -moz-animation-name:l1;
+    -o-animation-name: l1;
+    animation-name: l1;
+    @-webkit-keyframes l1 {
+      0%{
+        transform: scale(0.8);
+      }
+      50%{
+        transform: scale(1.07);
+      }
+  
+      100%{
+        transform: scale(1);
+      }
+    }
+  
+    @-moz-keyframes l1{
+      0%{
+        transform: scale(0.8);
+      }
+  
+      50%{
+        transform: scale(1.07);
+      }
+  
+      100%{
+        transform: scale(1);
+      }
+    }
+  
+    @-o-keyframes l1 {
+      0%{
+        transform: scale(0.8);
+      }
+  
+      50%{
+        transform: scale(1.07);
+      }
+  
+      100%{
+        transform: scale(1);
+      }
+    }
+  
+  
+  
+  
+    @keyframes l1 {
+      0%{
+        transform: scale(0.8);
+      }
+  
+      50%{
+        transform: scale(1.07);
+      }
+  
+      100%{
+        transform: scale(1);
+      }
+    }
+  }
+  @mixin placeholder{
+    &::placeholder {
+      color: #cac6c6;
+      opacity: 1; /* Firefox */
+    }
+  
+    &:-ms-input-placeholder { /* Internet Explorer 10-11 */
+      color: #cac6c6;
+    }
+  
+    &::-ms-input-placeholder { /* Microsoft Edge */
+      color: #cac6c6;
+    }
+  }
+  @mixin transform($transforms) {
+    -moz-transform: $transforms;
+    -o-transform: $transforms;
+    -ms-transform: $transforms;
+    -webkit-transform: $transforms;
+    transform: $transforms;
+  }
+  
+  @mixin loading-animation{
+    -webkit-animation-name: sk-bouncedelay;
+    -moz-animation-name:sk-bouncedelay;
+    -o-animation-name: sk-bouncedelay;
+    animation-name: sk-bouncedelay;
+    @-webkit-keyframes sk-bouncedelay {
+      0%,80%,100%{@include transform(scale(0))}
+      40%{@include transform(scale(1))}
+    }
+  
+    @-moz-keyframes sk-bouncedelay{
+      0%,80%,100%{@include transform(scale(0))}
+      40%{@include transform(scale(1))}
+    }
+  
+    @-o-keyframes sk-bouncedelay {
+      0%,80%,100%{@include transform(scale(0))}
+      40%{@include transform(scale(1))}
+    }
+  
+    @keyframes sk-bouncedelay {
+      0%,80%,100%{@include transform(scale(0));}
+      40%{@include transform(scale(1));}
+    }
+  }
+  @mixin bounceIn{
+    -webkit-animation-name: bounce;
+    -moz-animation-name:bounce;
+    -o-animation-name: bounce;
+    animation-name: bounce;
+  
+  
+    @-webkit-keyframes bounce {
+      0%, 20%, 40%, 60%, 80%, 100% {
+        -webkit-animation-timing-function: cubic-bezier(0.215,0.61,0.355,1);
+        animation-timing-function: cubic-bezier(0.215,0.61,0.355,1);
+      }
+      0% {
+        opacity: 0;
+        -webkit-transform: scale3d(0.3,0.3,0.3);
+        @include transform(scale3d(0.3,0.3,0.3))
+      }
+      20% {
+        -webkit-transform: scale3d(1.1,1.1,1.1);
+        @include transform(scale3d(1.1,1.1,1.1));
+      }
+      40% {
+        -webkit-transform: scale3d(0.9,0.9,0.9);
+        @include transform(scale3d(0.9,0.9,0.9));
+      }
+      60% {
+        opacity: 1;
+        -webkit-transform: scale3d(1.03,1.03,1.03);
+        @include transform(scale3d(1.03,1.03,1.03));
+      }
+      80% {
+        -webkit-transform: scale3d(0.97,0.97,0.97);
+        @include transform(scale3d(0.97,0.97,0.97));
+      }
+      100% {
+        opacity: 1;
+        -webkit-transform: scale3d(1,1,1);
+        @include transform(scale3d(1,1,1));
+      }
+    }
+  
+    @-moz-keyframes bounce{
+      0%, 20%, 40%, 60%, 80%, 100% {
+        -webkit-animation-timing-function: cubic-bezier(0.215,0.61,0.355,1);
+        animation-timing-function: cubic-bezier(0.215,0.61,0.355,1);
+      }
+      0% {
+        opacity: 0;
+        -webkit-transform: scale3d(0.3,0.3,0.3);
+        @include transform(scale3d(0.3,0.3,0.3))
+      }
+      20% {
+        -webkit-transform: scale3d(1.1,1.1,1.1);
+        @include transform(scale3d(1.1,1.1,1.1));
+      }
+      40% {
+        -webkit-transform: scale3d(0.9,0.9,0.9);
+        @include transform(scale3d(0.9,0.9,0.9));
+      }
+      60% {
+        opacity: 1;
+        -webkit-transform: scale3d(1.03,1.03,1.03);
+        @include transform(scale3d(1.03,1.03,1.03));
+      }
+      80% {
+        -webkit-transform: scale3d(0.97,0.97,0.97);
+        @include transform(scale3d(0.97,0.97,0.97));
+      }
+      100% {
+        opacity: 1;
+        -webkit-transform: scale3d(1,1,1);
+        @include transform(scale3d(1,1,1));
+      }
+    }
+  
+    @-o-keyframes bounce {
+      0%, 20%, 40%, 60%, 80%, 100% {
+        -webkit-animation-timing-function: cubic-bezier(0.215,0.61,0.355,1);
+        animation-timing-function: cubic-bezier(0.215,0.61,0.355,1);
+      }
+      0% {
+        opacity: 0;
+        -webkit-transform: scale3d(0.3,0.3,0.3);
+        @include transform(scale3d(0.3,0.3,0.3))
+      }
+      20% {
+        -webkit-transform: scale3d(1.1,1.1,1.1);
+        @include transform(scale3d(1.1,1.1,1.1));
+      }
+      40% {
+        -webkit-transform: scale3d(0.9,0.9,0.9);
+        @include transform(scale3d(0.9,0.9,0.9));
+      }
+      60% {
+        opacity: 1;
+        -webkit-transform: scale3d(1.03,1.03,1.03);
+        @include transform(scale3d(1.03,1.03,1.03));
+      }
+      80% {
+        -webkit-transform: scale3d(0.97,0.97,0.97);
+        @include transform(scale3d(0.97,0.97,0.97));
+      }
+      100% {
+        opacity: 1;
+        -webkit-transform: scale3d(1,1,1);
+        @include transform(scale3d(1,1,1));
+      }
+    }
+  
+    @keyframes bounce {
+      0%, 20%, 40%, 60%, 80%, 100% {
+        -webkit-animation-timing-function: cubic-bezier(0.215,0.61,0.355,1);
+        animation-timing-function: cubic-bezier(0.215,0.61,0.355,1);
+      }
+      0% {
+        opacity: 0;
+        -webkit-transform: scale3d(0.3,0.3,0.3);
+        @include transform(scale3d(0.3,0.3,0.3))
+      }
+      20% {
+        -webkit-transform: scale3d(1.1,1.1,1.1);
+        @include transform(scale3d(1.1,1.1,1.1));
+      }
+      40% {
+        -webkit-transform: scale3d(0.9,0.9,0.9);
+        @include transform(scale3d(0.9,0.9,0.9));
+      }
+      60% {
+        opacity: 1;
+        -webkit-transform: scale3d(1.03,1.03,1.03);
+        @include transform(scale3d(1.03,1.03,1.03));
+      }
+      80% {
+        -webkit-transform: scale3d(0.97,0.97,0.97);
+        @include transform(scale3d(0.97,0.97,0.97));
+      }
+      100% {
+        opacity: 1;
+        -webkit-transform: scale3d(1,1,1);
+        @include transform(scale3d(1,1,1));
+      }
+    }
+  }
+  @-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
+  @-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
+  @keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
+  @-moz-keyframes mspin { 100% { -moz-transform: rotate(-360deg); } }
+  @-webkit-keyframes mspin { 100% { -webkit-transform: rotate(-360deg); } }
+  @keyframes mspin { 100% { -webkit-transform: rotate(-360deg); transform:rotate(-360deg); } }
+  .ltr{
+    direction: ltr;
+  }

src/assets/scss/_variable.scss

@@ -0,0 +1,33 @@
+$S: 576px;
+$M: 768px;
+$L: 992px;
+$X: 1200px;
+
+
+//$greenColor: #348F6C;
+$colorGray: #707070;
+$colorGray2: #F3F3F3;
+//$goldColor: #E3CA92;
+// $redColor: #b1111b;
+
+// $colorWhite: #fff;
+// $MainColor: #23c7ac;
+// $colorOrange: #fcc537;
+/*$Gray: #85898d8c;*/
+// $Gray: #c4c5c547;
+// $filter: #57595b;
+// $colorPink: #ff808b;
+$ColorMainDark: #3B5286;
+// $ColorMainDark2: rgb(12, 6, 6);
+
+$backgroundColor: #F9F9F9;
+$backgroundColor2: #FEFEFE;
+$backgroundColorCard: #98E28C;
+$backgroundColorfilters: #E5F5FC;
+$backgroundPillColor: #1AA7EC;
+$gradiantColor1: #4ADEDE;
+$gradiantColor2: #24B2E9;
+$linkColor: #2EBDE6;
+$shadowColor: #00000029;
+$borderColor: #C7C7C7;
+$dangerColor: #E21179;

src/assets/scss/login.scss

@@ -0,0 +1,19 @@
+.login-card {
+    background: #FFFFFF 0% 0% no-repeat padding-box;
+    box-shadow: 0px 1px 5px $shadowColor;
+    border-radius: .75em;
+}
+
+.login-header {
+    width: 100%;
+    height: 50px;
+    background-color: $ColorMainDark;
+    border-radius: .75em .75em 0em 0em;
+    color: white;
+    line-height: 50px;
+    padding-right: 1em;
+}
+
+.login-body {
+    width: 50%;
+}

src/assets/scss/navbar.scss

@@ -0,0 +1,19 @@
+.navbarStyle {
+    min-height: 101px;
+    box-shadow: 0px 1px 6px #00000029;
+}
+
+.user-logout-btn {
+    background-color: transparent;
+    border: 0;
+    outline: 0;
+    box-shadow: 0 0 0;
+    text-decoration: none;
+    cursor: pointer;
+  
+    &:focus {
+      outline: 0;
+      box-shadow: 0 0 0;
+      text-decoration: none;
+    }
+}

src/assets/scss/project.scss

@@ -0,0 +1,116 @@
+.project-tabs {
+    background: $backgroundColor2 0% 0% no-repeat padding-box;
+    border: 1px solid $borderColor;
+    border-radius: 10px 10px 10px 10px;
+    direction: rtl;
+    ul {
+        padding-right: 1px;
+        li {
+            cursor: pointer;
+        }
+    }
+}
+
+.active-tab {
+    color: $ColorMainDark!important;
+    border-color: whitesmoke $borderColor $ColorMainDark $borderColor!important;
+}
+
+.project-stat-card {
+    border: 1px solid $borderColor;
+    border-radius: 10px;
+    min-width: 165px;
+    min-height: 170px;
+    padding: .5em;
+    &.active {
+        background-color: #E5F5FC;
+        border-color: $gradiantColor1;
+    }
+}
+
+.carousel-control {
+    width: 74px;
+    height: 32px;
+    background: $colorGray2 0% 0% no-repeat padding-box;
+    border-radius: 16px;
+    padding: 0!important;
+    box-sizing: content-box;
+}
+
+
+.post-filters {
+    min-height: 94px;
+    background-color: $backgroundColor;
+}
+
+.post-filters-btn {
+    background: $backgroundColor2 0% 0% no-repeat padding-box;
+    border: 1px solid $borderColor;
+    border-radius: 21px;
+}
+
+.post-filters-collapse-btn {
+    background-color: white;
+    border-color: $gradiantColor2;
+    color: $gradiantColor2;
+    &:hover{
+        background-color: white;
+        color: $gradiantColor2;
+        border-color: $gradiantColor2;
+    }
+    &:focus{
+        background-color: white;
+        color: $gradiantColor2;
+        border-color: $gradiantColor2;
+    }
+}
+
+.filters{
+    background-color: $backgroundColorfilters;
+    min-height: 168px;
+}
+
+.filters-input {
+    border: 1px solid $borderColor;
+    border-radius: 28px;
+    max-width: 150px;
+}
+
+.image-tag {
+    background: #FFFFFF 0% 0% no-repeat padding-box;
+    border-radius: 16px 0px 0px 16px;
+    top: 0;
+    right: 0;
+}
+
+.image-tag-reverse {
+    background: #FFFFFF 0% 0% no-repeat padding-box;
+    border-radius: 0 16px 16px 0;
+    top: 0;
+    left: 0;
+}
+
+.card-background-alt{
+    background: rgba($color: #98E28C, $alpha: .1) 0 0 no-repeat padding-box; 
+    border-color: #98E28C;
+}
+
+.card-background-deactivate{
+    background: rgba($color: #3e3e3e, $alpha: .6) 0 0 no-repeat padding-box !important; 
+    border-color: #3e3e3e!important;
+    color: #3e3e3e!important;
+
+    & img {
+        filter: grayscale(100%) blur(1px);
+    }
+
+}
+
+
+.post-modal {
+    background-color: $backgroundColor;
+
+    @media screen and (max-width: 568px) {
+        max-height: none!important;
+      }
+}

src/assets/scss/publicStyle.scss

@@ -0,0 +1,278 @@
+@font-face {
+	font-family: Vazir;
+	font-style: normal;
+	font-weight: 200;
+	src: url('../fonts/Vazir.eot');
+	src: url('../fonts/Vazir.eot?#iefix') format('embedded-opentype'),  /* IE6-8 */
+		 url('../fonts/Vazir.woff2') format('woff2'),  /* FF39+,Chrome36+, Opera24+*/
+		 url('../fonts/Vazir.woff') format('woff'),  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
+		 url('../fonts/Vazir.ttf') format('truetype');
+}
+
+@font-face {
+	font-family: Vazir;
+	font-style: normal;
+	font-weight: normal;
+	src: url('../fonts/Vazir-FD.eot');
+	src: url('../fonts/Vazir-FD.eot?#iefix') format('embedded-opentype'),  /* IE6-8 */
+	url('../fonts/Vazir-FD.woff2') format('woff2'),  /* FF39+,Chrome36+, Opera24+*/
+	url('../fonts/Vazir-FD.woff') format('woff'),  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
+	url('../fonts/Vazir-FD.ttf') format('truetype');
+}
+
+html {
+
+}
+body {
+  margin: 0;
+  font-family: Vazir, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+  'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+  sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-overflow-scrolling: touch;
+  background-color: $backgroundColor;
+  font-size: 16px;
+  @include media-max($M){
+    font-size: 13.5px;
+  }
+}
+
+//  colors
+
+.background-white {
+  background-color: white;
+}
+
+.background-pill-1{
+  background-color: $backgroundPillColor;
+  color: white;
+}
+
+.background-pill-2{
+  background-color: $gradiantColor1;
+  color: white;
+}
+
+
+// fonts
+
+.font-main-color {
+  color: $ColorMainDark!important;
+}
+
+.font-secondary-color {
+  color: $gradiantColor2!important;
+}
+
+.font-gray-color {
+  color: $colorGray!important;
+}
+
+.font-danger-color {
+  color: $dangerColor!important;
+}
+
+.font-size-m {
+  font-size: 15px;
+}
+
+.font-size-sm {
+  font-size: 13px;
+}
+
+
+// dropdown
+.drop-down-style {
+  border: 1px solid $ColorMainDark;
+  border-radius: 28px;
+}
+
+
+// input
+.input-border {
+  border: 1px solid $borderColor!important;
+  border-radius: 21px!important;
+  direction: rtl;
+}
+
+
+// btn
+
+.main-btn-pill {
+  background: transparent linear-gradient(180deg, $gradiantColor1 0%, $gradiantColor2 100%) 0% 0% no-repeat padding-box;
+  box-shadow: 0px 2px 5px $shadowColor;
+  border-radius: 21px;
+  color: white;
+}
+
+.main-btn-pill-reverse {
+  @extend .main-btn-pill;
+  background: none;
+  border: 1px solid $gradiantColor2;
+  color: $gradiantColor2;
+}
+
+.main-btn-round {
+  @extend .main-btn-pill;
+  border-radius: 100px;
+  border: none;
+  &:focus{
+    outline: none;
+  }
+}
+
+.main-btn-round-reverse {
+  @extend .main-btn-round;
+  background: none;
+  border: 1px solid $gradiantColor2;
+  color: $gradiantColor2;
+  max-width: 25px;
+  max-height: 25px;
+  padding: 2px 7px;
+}
+
+.main-btn-round-reverse-red {
+  @extend .main-btn-round-reverse;
+  border: 1px solid red;
+  color: red;
+  padding: 2px 6px 0 6px!important;
+}
+
+
+// table 
+
+
+table { 
+  border: 1px solid $borderColor;
+  border-collapse: separate;
+  border-left: 0;
+  border-radius: 10px;
+  border-spacing: 0px;
+}
+thead {
+  display: table-header-group;
+  vertical-align: middle;
+  border-color: inherit;
+  border-collapse: separate;
+  background-color: rgba($color: #3B5286, $alpha: 0.7);
+  color: rgba(white, .7);
+}
+tr {
+  display: table-row;
+  vertical-align: inherit;
+  border-color: inherit;
+}
+
+td {
+  padding: 5px 4px 6px 4px; 
+  vertical-align: top;
+  border-left: 1px solid $borderColor;    
+}
+
+th {
+  padding: 5px 4px 6px 4px; 
+}
+
+td {
+  border-top: 1px solid $borderColor;    
+}
+th:last-child {
+  border-radius: 10px 0 0 0;
+}
+th:first-child {
+  border-radius: 0 10px 0 0;
+}
+
+
+//
+
+
+.page-wrapper {
+  width: 100%;
+  background-color: white;
+  box-shadow: 0px 0px 3px $shadowColor;
+  border-radius: 10px;
+  direction: rtl;
+
+  .page-wrapper-header {
+    min-height: 50px;
+    line-height: 50px;
+    background: $ColorMainDark 0% 0% no-repeat padding-box;
+    border-radius: 10px 10px 0px 0px;
+    color: white;
+  }
+}
+
+
+.rotate180 {
+  @include transform(rotate(180deg));
+}
+
+.rotate90 {
+  @include transform(rotate(90deg));
+}
+
+.rotate-90 {
+  @include transform(rotate(-90deg));
+}
+
+
+.pointer {
+  cursor: pointer;
+}
+
+.z-index-1 {
+  z-index: 1;
+}
+
+
+.border-rounded{
+  border: 1px solid $borderColor;
+  border-radius: 10px;
+}
+
+.svg-color-main {
+  & path{
+    fill: black;
+  }
+}
+
+
+.alice-carousel__dots{
+  position: absolute;
+  bottom: 0;
+  left: 45%;
+}
+
+
+.deactive-svg path {
+  fill: #bbb;
+}
+
+.hover-red{
+  &:hover{
+    color: red;
+  }
+}
+
+
+.custom-ant-modal .ant-modal-header{
+  background-color: #3B5286!important;
+  border-radius: 10px 10px 0 0;
+  padding: 1.25em;
+}
+
+.custom-ant-modal .ant-modal-content{
+  border-radius: 10px;
+}
+
+.custom-ant-modal .ant-modal-footer .ant-btn{
+  font-size: 15px;
+  border-radius: 20px;
+  padding: 0 1rem;
+}
+
+.custom-ant-modal .ant-modal-footer .ant-btn-primary{
+  background: transparent linear-gradient(180deg, $gradiantColor1 0%, $gradiantColor2 100%) 0% 0% no-repeat padding-box;
+}

src/assets/scss/style.scss

@@ -0,0 +1,7 @@
+@import "variable";
+@import "mixin";
+@import "../../../node_modules/bootstrap/scss/bootstrap";
+@import "./publicStyle.scss";
+@import "./navbar.scss";
+@import "./login.scss";
+@import "./project.scss";

src/components/login/login.js

@@ -0,0 +1,76 @@
+import React from 'react';
+import {store} from "../../context/store";
+import {USER_LOGGED_IN, USER_LOGGED_OUT} from "../../context/actionType";
+import {fetcher} from "../../utils/common";
+import { error } from "../../utils/message";
+import {LOGIN_PATH} from "../../utils/constants";
+// import Logo from "../../assets/imgs/logo04.png"
+import {Spin, Space} from "antd";
+
+
+export default function Login(props) {
+
+    const [payload, setpayload] = React.useState({username: '', password: ''});
+    const {isLoggedIn, dispatch} = React.useContext(store)
+
+    const inputChange = (ele) => {
+        setpayload({...payload, [ele.target.name]: ele.target.value})
+    }
+
+    const formSubmit = (e) => {
+        e.preventDefault();
+        if (payload.username && payload.password){
+            fetcher(LOGIN_PATH,{
+                method: 'POST',
+                body:JSON.stringify(payload)
+            })
+            .then((response) => {
+                dispatch({ type: USER_LOGGED_IN, payload: response.result })
+                setTimeout( () => props.history.push("/"), 1000 )
+            } )
+            .catch( e => error( e.message ? e.message : undefined ) )
+        }
+    }
+
+    React.useEffect(() => {
+        // if (!Boolean(Token() && isLoggedIn)){
+        //     dispatch({type: USER_LOGGED_OUT});
+        // }
+    }, [])
+
+    return (
+        <div className="row justify-content-md-center mx-auto my-5 py-5" style={{maxWidth: "900px"}}>
+            <div className="col-md-6 text-center bg-white p-0">
+                {/* <div className="login-header text-right">
+                    ورود به سامانه
+                </div> */}
+                <div className="login-body py-3 mx-auto">
+                    <p className="text-bold font-gray-color">
+                        {/* <img className="img-fluid" src={Logo} /> */}
+                        {/* رصد فضای فرهنگی کشور */}
+                    </p>
+                    <form >
+                        <div className="form-group text-right my-3 font-gray-color">
+                            <label htmlFor="login-username">نام کاربری</label>
+                            <input type="text" name="username" onChange={(ele) => inputChange(ele)} value={payload.username} className="form-control input-border" id="login-username" />
+                        </div>
+                        <div className="form-group text-right my-3 font-gray-color">
+                            <label htmlFor="login-password">کلمه عبور</label>
+                            <input type="password" name="password" className="form-control input-border" onChange={(ele) => inputChange(ele)} value={payload.password} id="login-password" />
+                        </div>
+                        <div className="form-group form-check my-3 text-right">
+                            <label className="form-check-label mr-4 font-size-sm font-gray-color" htmlFor="login-remember"> مرا به خاطر بسپار </label>
+                            <input type="checkbox" className="form-check-input" id="login-remember"/>
+                        </div>
+                        <button type="submit" className="btn main-btn-pill w-100 mt-2" onClick={(e) => formSubmit(e)} >ورود به سامانه</button>
+                    </form>
+                    <p className="pt-4 font-size-sm mt-2 font-gray-color">
+                        رمز عبور خود را فراموش کرده اید؟ <a href="/">کلیک کنید</a>
+                    </p>
+                </div>
+            </div>
+        </div>
+    )
+}
+
+Login.displayName="Login";

src/components/login/signin_oidc.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import userManager from '../../utils/userService';
+
+
+
+export default function SignInOidc(props) {
+
+    React.useEffect(() => {
+        // if (!Boolean(Token() && isLoggedIn)){
+        //     dispatch({type: USER_LOGGED_OUT});
+        // }
+        userManager.signinRedirect()
+        .then( res => console.log("4444",res))
+        .catch( e => console.log("2222",e))
+    }, [])
+
+    return (
+        <div>
+            ggggggggggg
+        </div>
+    )
+}

src/components/public/breadcrumb.js

@@ -0,0 +1,27 @@
+import React from 'react'
+import { Link } from "react-router-dom";
+
+const Breadcrumbs = ({ crumbs }) => {
+    // Don't render a single breadcrumb.
+    if (crumbs.length <= 1) {
+      return null;
+    }  return (
+      <div className="container text-right my-2 font-gray-color">
+        {/* Link back to any previous steps of the breadcrumb. */}
+        {crumbs.map(({ name, path }, key) =>
+          key + 1 === crumbs.length ? (
+            <span key={key} className="mr-1">
+                {name}
+            </span>
+          ) : (
+            <span className="mr-1" key={key}>
+              <Link to={path}>
+                  {name} 
+              </Link>
+              <span className="mr-1"> / </span>
+            </span>
+          )
+        )}
+      </div>
+    );
+  };export default Breadcrumbs;

src/components/public/commonComps.js

@@ -0,0 +1,253 @@
+// import React from 'react';
+// import {FaTwitter, FaInstagram, FaTelegram, FaRetweet, FaQuoteRight, FaReply, FaComment} from "react-icons/fa";
+// import { Spin, Tag } from 'antd';
+// import {ReactComponent as ReactEyeLogo} from "../../assets/icons/eye.svg";
+// import {ReactComponent as ReactHeartLogo} from "../../assets/icons/heart.svg";
+// import CardPic from "../../assets/icons/pic/Group 1011.svg";
+// import PlayPic from "../../assets/icons/pic/PLAY.svg";
+// import IgtvPic from "../../assets/icons/pic/IGTV.svg";
+
+
+// const Icon = (props) => (
+//     <small className="mx-1"> {props.detail} {React.createElement(props.logo, {style: {width: "20px", ...props.misc}})} </small>
+// )
+
+
+// const convertSM = (social_media) => {
+//     const SM = {ig: "اینستاگرام", tg: "تلگرام", tw: "توییتر", fb: "فیسبوک", yt: "یوتیوب", news: "اخبار", newspaper: "روزنامه"}
+//     return SM[social_media]
+// }
+
+
+// //
+
+
+// export const getPageNumber = (url) => {
+//     if (!url) return 0
+//     let urlObj = new URL(url)
+//     let params = new URLSearchParams(urlObj.search);
+//     return params.get("page") ? parseInt(params.get("page")) : 0
+// };
+
+
+// export const Pagination = (props) => {
+//     return (
+//     <div className="d-flex justify-content-between my-4 ml-4 ">
+//         <div className="font-gray-color mr-3"></div>
+//         <div className="d-flex justify-content-around border carousel-control" style={{width: "150px"}}> 
+//             <button className="btn main-btn-round-reverse mt-1 bg-white font-weight-bold"
+//                 onClick={() => props.changePage(props.prevPage)} disabled={props.prevPage === 0 && props.currentPage !== 2} >{"<"}</button>
+//             <span className="mt-1"> صفحه {props.currentPage} </span>
+//             <button className="btn main-btn-round-reverse mt-1 bg-white font-weight-bold"
+//                 onClick={() => props.changePage(props.nextPage)} disabled={!Boolean(props.nextPage)} >{">"}</button>
+//         </div>
+//     </div>
+// )};
+
+
+// export const mediaTypeLinkConvert = (media) => {
+//     switch (media) {
+//         case "twitter":
+//             return <FaTwitter size="2em" color="#1da1f2" />
+//         case "tw":
+//             return <FaTwitter size="1em" />
+//         case "instagram":
+//             return <FaInstagram size="2em" color="#f56040" />
+//         case "ig":
+//             return <FaInstagram size="1em"  />
+//         case "telegram":
+//             return <FaTelegram size="2em" color="#0088cc" />
+//         case "tg":
+//             return <FaTelegram size="1em"  />
+//         default:
+//             return "لینک اصلی"
+//     }
+// }
+
+
+// export const mediaTypeDetailsConverter = (media, details) => {
+//     switch (media) {
+//         case "twitter":
+//             return [<Icon 
+//                         key={0}
+//                         detail={details.likes} 
+//                         logo={ReactHeartLogo} />,
+//                     <Icon 
+//                         key={1}
+//                         detail={details.quotes} 
+//                         misc={ {fontSize: "1.8em", fill: "#1da1f2"}}
+//                         logo={FaQuoteRight} />,
+//                     <Icon 
+//                         key={2}
+//                         detail={details.replies} 
+//                         misc={ {fontSize: "1.8em", fill: "#1da1f2"}}
+//                         logo={FaReply} />,
+//                     <Icon 
+//                         key={3}
+//                         detail={details.retweets} 
+//                         misc={ {fontSize: "1.8em", fill: "#1da1f2"}}
+//                         logo={FaRetweet} />,
+//                 ]
+//         case "instagram":
+//             return [<Icon 
+//                         key={0}
+//                         detail={details.likes} 
+//                         logo={ReactHeartLogo} />,
+//                     <Icon 
+//                         key={1}
+//                         detail={details.comments}
+//                         misc={ {fontSize: "1.8em", fill: "#f56040"}}
+//                         logo={FaComment} />,
+//                     <Icon 
+//                         key={2}
+//                         detail={details.views}
+//                         misc={ {fontSize: "1.8em", fill: "#f56040"}}
+//                         logo={ReactEyeLogo} />,
+//                 ]
+//         case "telegram":
+//             return [<Icon 
+//                         key={0}
+//                         detail={details.views} 
+//                         logo={ReactEyeLogo} />,
+//                     // <Icon 
+//                     //     key={1}
+//                     //     detail={details.likes} 
+//                     //     logo={ReactHeartLogo} />,
+//                 ]
+//         default:
+//             return "-"
+//     }
+// }
+
+
+// export const thumbnailUrl = (igtv, mediaList) => {
+//     if (igtv) return <img src={IgtvPic} className="card-img-top" alt="asr" />
+//     if (Boolean(mediaList.length)){
+//         return mediaList[0].exact_url?.includes("/video/") ? (
+//             <img src={PlayPic} className="card-img-top" alt="asr" />
+//         ) : (
+//             <img src={mediaList[0].exact_url} className="card-img-top" alt="asr" />
+//         )
+//     }
+//     return <img src={CardPic} className="card-img-top" alt="asr" />
+// }
+
+
+// export const formatDate = (date) => date ? date.split(" ")[1] + " " + date.split(" ")[0] : date;
+
+
+// export const Loading = () => ( <div className="d-flex justify-content-center align-items-center" style={{minHeight: "150px"}}>
+//                                 <Spin tip="در حال دریافت ..." size="large" />
+//                             </div>
+//                         )
+
+
+// export const sortConvert = (sortParam) => {
+//     switch (sortParam) {
+//         case "-like":
+//             return " بیشترین لایک "
+//         case "like":
+//             return " کمترین لایک "
+//         case "-date":
+//             return " جدیدترین "
+//         case "date":
+//             return " قدیمی ترین "
+//         case "-comment":
+//             return " بیشترین کامنت "
+//         case "comment":
+//             return " کمترین کامنت "
+//         case "-retweet":
+//             return " بیشترین ریتوییت "
+//         case "retweet":
+//             return " کمترین ریتوییت "
+//         default:
+//             return " دسته بندی "
+//     }
+// }
+
+
+// export const QueryParamToBadge = (props) => {
+//     let flag = true;
+//     if (props["value"] === "" ) flag = false;
+//     let name = '';
+//     if (flag){
+//         switch (props.item) {
+//             case "is_tagged":
+//                 name = props.value ? "تگ خورده" : "تگ نخورده";
+//                 break;
+//             case "o":
+//                 name = ` مرتب سازی بر اساس ${props.value.map( item => sortConvert(item))}`
+//                 break;
+//             case "tagger":
+//                 name = `تگ زننده ${props.value}`;
+//                 break;
+//             case "subject":
+//                 name = `سوژه ${props.value}`;
+//                 break;
+//             case "type":
+//                 name = `شبکه اجتماعی ${convertSM(props.value)}`;
+//                 break;
+//             case "url":
+//                 name = `آدرس ${props.value}`;
+//                 break;
+//             case "date_after":
+//                 name = `از ${props.value.replace(/-/g, "/")}`;
+//                 break;
+//             case "trend":
+//                 name = "چالشی ترین ها";
+//                 break;
+//             case "star":
+//                 name = "منتخب ترین ها";
+//                 break;
+//             case "date_before":
+//                 name = `تا ${props.value.replace(/-/g, "/")}`;
+//                 break;
+//             default: 
+//                 break;
+//         }
+//     }
+//     return flag ? (
+//                 <span className="badge badge-pill font-gray-color px-3 py-2 ml-2 mt-1" style={{backgroundColor: "#E5F5FC"}}>
+//                     {name}
+//                     <span className="mr-2 font-size-m pointer hover-red" onClick={ e => props.deleteParam(props.item)}>&times;</span>
+//                 </span>
+//             ) : []
+// }
+
+// export const SMPageToBadge = (props) => {
+//     let borderColor = undefined;
+//     switch (props.type) {
+//         case "tg":
+//             borderColor = "#006596";
+//             break;
+//         case "tw":
+//             borderColor = "#1da1f2";
+//             break;
+//         case "ig":
+//             borderColor = "#f56040";
+//             break;
+//         default:
+//             borderColor = "black"
+//             break;
+//     }
+//     return (
+//         <span className={`badge badge-pill text-white px-3 py-2 ml-2 my-1 ${props.className}`} onClick={props?.onClick} style={{backgroundColor: borderColor}}>
+//             {props.username}
+//             <span className="mr-2 font-size-m text-white">{mediaTypeLinkConvert(props.type)}</span>
+//         </span>
+//     )
+// }
+
+
+// export const Sentiment = React.forwardRef( (props, ref) => {
+
+//     const config = [{index: 0, color: "default", title: "خنثی"}, {index: 1, color: "green", title: "مثبت"}, {index: 2, color: "red", title: "منفی"}];
+
+//     const [activeTag, setActiveTag] = React.useState(props.sentiment);
+
+//     let instance = config.filter( item => item.title === activeTag )[0];
+
+//     const cycle = (index) => { let temp = config[++index%config.length].title; setActiveTag(state => temp); props.setSentimentStatus( state => temp); };
+
+//     return <Tag ref={ref} onClick={ () => props.editable ? cycle(instance.index) : null } className="float-left pointer ml-2" color={instance.color}>{instance.title}</Tag>
+// })

src/components/public/home.js

@@ -0,0 +1,14 @@
+import React from 'react';
+
+
+export default function Home(props) {
+    React.useEffect( () => {
+        // setTimeout(()=> props.history.push("/monitoring"), 2000)
+    }, [])
+    return (
+        <div className="d-flex justify-content-center align-items-center" style={{height: "300px"}}>
+            <h3>به سامانه مانیتورینگ خوش آمدید </h3>
+        </div>
+    )
+}
+

src/components/public/main.js

@@ -0,0 +1,17 @@
+import React, {useContext} from 'react';
+import { Redirect } from "react-router-dom";
+import Navbar from './navbar';
+import {store} from "../../context/store";
+
+
+export default function Main(props) {
+    const {isLoggedIn} = useContext(store);
+    return (
+        <>
+            {/* <Navbar /> */}
+            <div className="container-fluid text-right">
+                { isLoggedIn || (props.children[1].type?.displayName === "Login") ? props.children : <Redirect to="/login" /> }
+            </div>
+        </>
+    )
+}

src/components/public/navbar.js

@@ -0,0 +1,159 @@
+import React, {useContext, useEffect} from 'react';
+import {NavLink as NavLinkRouter} from "react-router-dom";
+import {FaRegUser} from 'react-icons/fa';
+import {FiChevronDown} from 'react-icons/fi';
+import {AiOutlineLogout} from 'react-icons/ai';
+import { Menu, Dropdown } from 'antd';
+import {store} from "../../context/store";
+import {fetcher} from "../../utils/common";
+import {USER_LOGGED_OUT, SET_USER_PROFILE_NAME} from "../../context/actionType";
+import {USER_PROFILE} from "../../utils/constants";
+import {ReactComponent as Logo} from "../../assets/icons/pic/Logo.svg";
+
+
+export default function Navbar() {
+    const {isLoggedIn, userName, dispatch} = useContext(store);
+
+    const onLogout = () => {
+        dispatch({type: USER_LOGGED_OUT})
+    }
+
+    const ManagementMenu = (
+        <Menu>
+            <Menu.Item key="0">
+                <NavLinkRouter className="font-size-m font-main-color text-decoration-none p-3" to="/manage/project">
+                    تعریف پروژه جدید
+                </NavLinkRouter>
+            </Menu.Item>
+            <Menu.Item key="1">
+                <NavLinkRouter className="font-size-m font-main-color text-decoration-none p-3" to="/manage/subject">
+                    مدیریت سوژه ها
+                </NavLinkRouter>
+            </Menu.Item>
+            <Menu.Item key="2">
+                <NavLinkRouter className="font-size-m font-main-color text-decoration-none p-3" to="/manage/subjects">
+                    ساخت سوژه
+                </NavLinkRouter>
+            </Menu.Item>
+            <Menu.Item key="3">
+                <NavLinkRouter className="font-size-m font-main-color text-decoration-none p-3" to="/manage/tags">
+                    مدیریت تگ ها
+                </NavLinkRouter>
+            </Menu.Item>
+            <Menu.Item key="4">
+                <NavLinkRouter className="font-size-m font-main-color text-decoration-none p-3" to="/manage/favoritism">
+                    مدیریت ویژگی ها
+                </NavLinkRouter>
+            </Menu.Item>
+            {/* <Menu.Item key="5">
+                <NavLinkRouter className="font-size-m font-main-color text-decoration-none p-3" to="/manage/users">
+                    مدیریت کاربران
+                </NavLinkRouter>
+            </Menu.Item> */}
+        </Menu>
+    );
+
+    const UserMenu = (
+        <Menu>
+            {/* <Menu.Item key="0">
+                <div >
+    
+                </div>
+            </Menu.Item> */}
+            <Menu.Item key="1">
+                <div className="text-center" syle={{width: '30px'}}>
+                    <button className="user-logout-btn"
+                            onClick={() => onLogout()}
+                    >
+                        <span className="font-main-color">
+                            <AiOutlineLogout/>
+                        </span>
+                        <span>خروج</span>
+    
+                        </button>
+                </div>
+            </Menu.Item>
+        </Menu>
+    );
+
+    useEffect(() => {
+        if (!Boolean(userName)){
+            fetcher(USER_PROFILE)
+            .then( res => dispatch({ type: SET_USER_PROFILE_NAME, payload: res.result }) )
+            .catch( _ => {})
+        }
+    }, [userName])
+
+    return (
+        <>
+        <nav className="navbar navbar-expand-lg background-white navbarStyle text-center">
+
+            <div className="container">
+                { 
+                isLoggedIn && 
+                    (
+                        <Dropdown overlay={UserMenu} trigger={['click']} >
+                            <div className="d-inline-block px-1 py-1 drop-down-style text-center ml-2">
+                                <span className="font-main-color">
+                                        <FiChevronDown className="text-dark" />
+                                </span>
+
+                                <span className="mx-2 font-main-color">
+                                    {userName}        
+                                </span>
+                                <span className="bg-white borderSize-1 font-main-color drop-down-style d-inline-block"
+                                        style={{width: '28px', height: '28px'}}>
+                                    <FaRegUser />
+                                </span>
+                            </div>
+                        </Dropdown>
+                    )
+                }
+
+                <div className="collapse navbar-collapse mr-2" id="navbarNavAltMarkup">
+                    {
+                        isLoggedIn && (
+                            <div className="navbar-nav ml-auto">
+                                {/* <NavLinkRouter className="nav-item nav-link font-size-m  font-main-color" to="/view/tag">
+                                    تگ پست ها
+                                </NavLinkRouter> */}
+                                {/* <span className="nav-item nav-link " >|</span> */}
+                                {/* <NavLinkRouter className="nav-item nav-link font-size-m  font-main-color" to="/subject">
+                                    مدیریت سوژه ها
+                                </NavLinkRouter> */}
+                                {/* <span className="nav-item nav-link " >|</span>
+                                <NavLinkRouter className="nav-item nav-link font-size-m  font-main-color" to="/project/create">
+                                    تعریف پروژه جدید
+                                </NavLinkRouter> */}
+                                {/* <span className="nav-item nav-link " >|</span> */}
+                                <NavLinkRouter className="nav-item nav-link font-size-m  font-main-color" to="/report">
+                                    گزارش ها
+                                </NavLinkRouter>
+                                <span className="nav-item nav-link " >|</span>
+                                <NavLinkRouter className="nav-item nav-link font-size-m  font-main-color" to="/view/project">
+                                    پروژه‌ها
+                                </NavLinkRouter>
+                                <span className="nav-item nav-link " >|</span>
+                                <Dropdown overlay={ManagementMenu} placement="bottomRight">
+                                    <a href="#" className="ant-dropdown-link p-2 font-size-m text-decoration-none font-main-color" onClick={e => e.preventDefault()}>
+                                    مدیریت
+                                    </a>
+                                </Dropdown>
+                            </div>
+                        )
+                    }
+                </div>
+                <span className="navbar-brand font-main-color font-weight-bold">
+                    <NavLinkRouter to="/">
+                        <Logo style={{maxHeight: "80px"}} />
+                    </NavLinkRouter>
+                </span>
+                <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
+                    <span className="navbar-toggler-icon"></span>
+                </button>
+            </div>
+        </nav>
+
+        </>
+    )
+}

src/components/public/reactSelectConf.js

@@ -0,0 +1,123 @@
+import React from "react";
+
+
+export const options = [
+    { value: 'chocolate', label: 'Chocolate' },
+    { value: 'strawberry', label: 'Strawberry' },
+    { value: 'vanilla', label: 'Vanilla' }
+]
+
+
+export const userOptions = [
+    { label: `علی حمیدی ${<img src={require("../../assets/icons/arrow2.svg")} alt="alt" />}`, value: 'Chocolate' },
+    { label: `علی حمیدی `, value: 'Chocolate2' },
+    { label: `علی حمیدی `, value: 'Chocolate3' },
+]
+
+
+export const colourStyles = {
+    control: styles => ({ ...styles, minHeight: "100px", padding: 0 , alignItems: "start",}),
+    option: (provided, state) => ({
+        ...provided,
+        display: "none"
+    }),
+    multiValue: (base, state) => ({
+        ...base,
+        background: "#4ADEDE",
+        border: "1px solid white",
+        borderRadius: "50px",
+        padding: "5px 8px",
+        color: "white",
+    }),
+    multiValueLabel: (styles, { data }) => ({
+        ...styles,
+        color: "white",
+    }),
+    multiValueRemove: (styles, { data }) => ({
+        ...styles,
+        color: "#4ADEDE",
+        backgroundColor: "white",
+        borderRadius: "50%",
+        cursor: "pointer",
+        ':hover': {
+          color: 'red',
+        },
+    }),
+    clearIndicator: styles => ({...styles, display: "none"}),
+    dropdownIndicator: styles => ({...styles, display: "none"}),
+};
+
+export const userSelectStyles = {
+    ...colourStyles,
+    option: (provided, state) => ({
+        ...provided,
+    }),
+    clearIndicator: styles => ({...styles}),
+    dropdownIndicator: styles => ({...styles}),
+    multiValue: (base, state) => ({
+        ...base,
+        background: "white",
+        border: "1px solid #3B5286",
+        borderRadius: "50px",
+        padding: "5px 8px",
+        color: "white",
+    }),
+    multiValueLabel: (styles, { data }) => ({
+        ...styles,
+        color: "#3B5286",
+    }),
+    multiValueRemove: (styles, { data }) => ({
+        ...styles,
+        color: "white",
+        backgroundColor: "#3B5286",
+        borderRadius: "50%",
+        cursor: "pointer",
+        ':hover': {
+          color: 'red',
+        },
+    }),
+};
+
+
+export const taggerSelectStyles = {
+    ...colourStyles,
+    control: styles => ({ ...styles, padding: 0 , alignItems: "start",}),
+    multiValue: (base, state) => ({
+        ...base,
+        background: "#4ADEDE",
+        border: "1px solid white",
+        borderRadius: "50px",
+        color: "black",
+    }),
+    multiValueRemove: (styles, { data }) => ({
+        ...styles,
+        color: "white",
+        cursor: "pointer",
+        ':hover': {
+          color: 'red',
+        },
+    }),
+    option: (provided, state) => ({
+        ...provided,
+    }),
+    clearIndicator: styles => ({...styles}),
+};
+
+export const mentionerSelectStyles = {
+    ...taggerSelectStyles,
+    multiValue: (base, state) => ({
+        ...base,
+        background: "#1AA7EC",
+        border: "1px solid white",
+        borderRadius: "50px",
+        color: "black",
+    }),
+};
+
+export const filterSubjectsSelectStyles = {
+    control: styles => ({ ...styles, padding: 0 , alignItems: "start", borderRadius: "28px"}),
+    option: (provided, state) => ({
+        ...provided,
+    }),
+    clearIndicator: styles => ({...styles, display: "none"}),
+}

src/components/public/routes.js

@@ -0,0 +1,34 @@
+import Home from "../public/home";
+import Login from "../login/login";
+// import Reports from "../report/reportPage";
+// import Monitoring from "../monitoring/monitoring";
+// import ProjectTabs from "../project/projectTabs";
+// import CreateProject from "../project/createProject";
+// import SubjectManage from "../subjects/subjectManage";
+// import SubjectForm from "../subjects/subjectForm";
+// import SubjectProfile from "../subjects/subjectProfile";
+// // import TagPost from "../tag/tagPost";
+// import TagCreate from "../tag/tagCreate";
+// import FavoritismCreate from "../subjects/favoritismManage";
+// import UsersList from "../users/usersList";
+// import SignInOidc from "../login/signin_oidc"
+
+
+export default [
+    { path: "/", name: "سامانه", Component: Home },
+    { path: "/login", name: "ورود", Component: Login },
+    // { path: "/monitoring", name: "ورود", Component: Monitoring },
+    // { path: "/manage", name: "مدیریت", Component: Home },
+    // { path: "/manage/subject", name: "مدیریت سوژه ها", Component: SubjectManage },
+    // { path: "/manage/subject/profile/:subjectId(\\d+)", name: "پروفایل سوژه", Component: SubjectProfile },
+    // { path: "/manage/subjects", name: "ساخت سوژه", Component: SubjectForm },
+    // { path: "/manage/subjects/edit/:subjectId(\\d+)", name: "ویرایش سوژه", Component: SubjectForm },
+    // { path: "/manage/project", name: "مدیریت پروژه‌ها", Component: CreateProject },
+    // { path: "/manage/project/edit/:projectId(\\d+)", name: "ویرایش پروژه", Component: CreateProject },
+    // { path: "/manage/tags", name: "مدیریت تگ ها", Component: TagCreate},
+    // { path: "/manage/favoritism", name: "مدیریت ویژگی‌ها", Component: FavoritismCreate},
+    // { path: "/manage/users", name: "مدیریت کاربران", Component: UsersList},
+    // { path: "/view/project", name: "پروژه‌ها", Component: ProjectTabs },
+    // { path: "/report", name: "گزارش ها", Component: Reports },
+    // { path: "/view/tag", name: "تگ پست ها", Component: TagPost},
+  ];

src/context/actionType.js

@@ -0,0 +1,9 @@
+module.exports = {
+    USER_LOGGED_IN: "USER_LOGGED_IN",
+    USER_LOGGED_OUT: "USER_LOGGED_OUT",
+    SET_ACTIVE_PROJECT: "SET_ACTIVE_PROJECT",
+    SET_ACTIVE_TAG_PROJECT: "SET_ACTIVE_TAG_PROJECT",
+    SET_USER_PROFILE_NAME: "SET_USER_PROFILE_NAME",
+    SET_POST_LIST: "SET_POST_LIST",
+    SET_POST: "SET_POST",
+}

src/context/reducer.js

@@ -0,0 +1,66 @@
+import * as actionType from "./actionType";
+import {setToken, removeToken} from '../utils/utils';
+import {success} from '../utils/message';
+
+
+export default (state, action) => {
+    switch (action.type) {
+      case actionType.USER_LOGGED_IN:
+        document.cookie="token="+action.payload.access_token;
+        setToken(action.payload.access_token);
+        success('با موفقیت وارد شدید')
+        return {
+          ...state,
+          isLoggedIn: true,
+          token: action.payload.access_token
+        };
+
+      case actionType.USER_LOGGED_OUT:
+        removeToken();
+        success('از حساب خارج شدید')
+        return {
+          ...state,
+          isLoggedIn: false,
+          userName: null,
+        };
+
+      case actionType.SET_ACTIVE_PROJECT:
+        return{
+          ...state,
+          activeProject: action.payload
+        };
+
+      case actionType.SET_ACTIVE_TAG_PROJECT:
+        return{
+          ...state,
+          activeTagProject: action.payload
+        };
+
+      case actionType.SET_USER_PROFILE_NAME:
+        return {
+          ...state,
+          userName: action.payload.first_name + " " + action.payload.last_name
+        }
+
+      case actionType.SET_POST_LIST:
+        return {
+          ...state,
+          postList: action.payload 
+        }
+
+      case actionType.SET_POST:
+        return {
+          ...state,
+          postList: state.postList.map( post => {
+            if (post.id === action.payload.id){
+              return action.payload;
+            }else {
+              return post;
+            }
+          } )
+        }
+
+      default:
+        return state;
+    }
+  };

src/context/store.js

@@ -0,0 +1,24 @@
+import React, {createContext, useReducer} from "react";
+import AppReducer from "./reducer";
+import {Token} from "../utils/utils";
+
+const getInitialState = () => {
+    return {
+        isLoggedIn: true,
+        // isLoggedIn: Boolean(Token()),
+        userName: null,
+        postList: [],
+    };
+}
+
+const store = createContext(getInitialState());
+
+
+const StateProvider = ( {children} ) => { 
+
+    const [state, dispatch] = useReducer( AppReducer, getInitialState());
+
+    return <store.Provider value={{...state, dispatch }}>{children}</store.Provider>
+};
+
+export { store, StateProvider };

src/index.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { ConfigProvider } from 'antd';
+import '../node_modules/antd/dist/antd.compact.min.css'
+import './assets/scss/style.scss';
+import App from './App';
+import {StateProvider} from "./context/store";
+import * as serviceWorker from './serviceWorker';
+
+
+ReactDOM.render(
+  <React.StrictMode>
+    <StateProvider>
+      <ConfigProvider direction="rtl">
+        <App />
+      </ConfigProvider>
+    </StateProvider>
+  </React.StrictMode>,
+  document.getElementById('root')
+);
+
+// If you want your app to work offline and load faster, you can change
+// unregister() to register() below. Note this comes with some pitfalls.
+// Learn more about service workers: https://bit.ly/CRA-PWA
+serviceWorker.unregister();

src/serviceWorker.js

@@ -0,0 +1,141 @@
+// This optional code is used to register a service worker.
+// register() is not called by default.
+
+// This lets the app load faster on subsequent visits in production, and gives
+// it offline capabilities. However, it also means that developers (and users)
+// will only see deployed updates on subsequent visits to a page, after all the
+// existing tabs open on the page have been closed, since previously cached
+// resources are updated in the background.
+
+// To learn more about the benefits of this model and instructions on how to
+// opt-in, read https://bit.ly/CRA-PWA
+
+const isLocalhost = Boolean(
+  window.location.hostname === 'localhost' ||
+    // [::1] is the IPv6 localhost address.
+    window.location.hostname === '[::1]' ||
+    // 127.0.0.0/8 are considered localhost for IPv4.
+    window.location.hostname.match(
+      /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
+    )
+);
+
+export function register(config) {
+  if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
+    // The URL constructor is available in all browsers that support SW.
+    const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
+    if (publicUrl.origin !== window.location.origin) {
+      // Our service worker won't work if PUBLIC_URL is on a different origin
+      // from what our page is served on. This might happen if a CDN is used to
+      // serve assets; see https://github.com/facebook/create-react-app/issues/2374
+      return;
+    }
+
+    window.addEventListener('load', () => {
+      const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
+
+      if (isLocalhost) {
+        // This is running on localhost. Let's check if a service worker still exists or not.
+        checkValidServiceWorker(swUrl, config);
+
+        // Add some additional logging to localhost, pointing developers to the
+        // service worker/PWA documentation.
+        navigator.serviceWorker.ready.then(() => {
+          console.log(
+            'This web app is being served cache-first by a service ' +
+              'worker. To learn more, visit https://bit.ly/CRA-PWA'
+          );
+        });
+      } else {
+        // Is not localhost. Just register service worker
+        registerValidSW(swUrl, config);
+      }
+    });
+  }
+}
+
+function registerValidSW(swUrl, config) {
+  navigator.serviceWorker
+    .register(swUrl)
+    .then(registration => {
+      registration.onupdatefound = () => {
+        const installingWorker = registration.installing;
+        if (installingWorker == null) {
+          return;
+        }
+        installingWorker.onstatechange = () => {
+          if (installingWorker.state === 'installed') {
+            if (navigator.serviceWorker.controller) {
+              // At this point, the updated precached content has been fetched,
+              // but the previous service worker will still serve the older
+              // content until all client tabs are closed.
+              console.log(
+                'New content is available and will be used when all ' +
+                  'tabs for this page are closed. See https://bit.ly/CRA-PWA.'
+              );
+
+              // Execute callback
+              if (config && config.onUpdate) {
+                config.onUpdate(registration);
+              }
+            } else {
+              // At this point, everything has been precached.
+              // It's the perfect time to display a
+              // "Content is cached for offline use." message.
+              console.log('Content is cached for offline use.');
+
+              // Execute callback
+              if (config && config.onSuccess) {
+                config.onSuccess(registration);
+              }
+            }
+          }
+        };
+      };
+    })
+    .catch(error => {
+      console.error('Error during service worker registration:', error);
+    });
+}
+
+function checkValidServiceWorker(swUrl, config) {
+  // Check if the service worker can be found. If it can't reload the page.
+  fetch(swUrl, {
+    headers: { 'Service-Worker': 'script' },
+  })
+    .then(response => {
+      // Ensure service worker exists, and that we really are getting a JS file.
+      const contentType = response.headers.get('content-type');
+      if (
+        response.status === 404 ||
+        (contentType != null && contentType.indexOf('javascript') === -1)
+      ) {
+        // No service worker found. Probably a different app. Reload the page.
+        navigator.serviceWorker.ready.then(registration => {
+          registration.unregister().then(() => {
+            window.location.reload();
+          });
+        });
+      } else {
+        // Service worker found. Proceed as normal.
+        registerValidSW(swUrl, config);
+      }
+    })
+    .catch(() => {
+      console.log(
+        'No internet connection found. App is running in offline mode.'
+      );
+    });
+}
+
+export function unregister() {
+  if ('serviceWorker' in navigator) {
+    navigator.serviceWorker.ready
+      .then(registration => {
+        registration.unregister();
+      })
+      .catch(error => {
+        console.error(error.message);
+      });
+  }
+}

src/setupTests.js

@@ -0,0 +1,5 @@
+// jest-dom adds custom jest matchers for asserting on DOM nodes.
+// allows you to do things like:
+// expect(element).toHaveTextContent(/react/i)
+// learn more: https://github.com/testing-library/jest-dom
+import '@testing-library/jest-dom/extend-expect';

src/utils/common.js

@@ -0,0 +1,47 @@
+import {Url, Header, removeToken} from './utils';
+
+
+export function fetcher(url = Url("/url-not-filled", {}), header = {}, extra = {}) {
+
+    function handleResponse(response) {
+        return response.json()
+            .then((json) => {
+                if (!response.ok) {
+                    const error = Object.assign({}, json, {
+                        status: response.status,
+                        statusText: response.statusText,
+                    });
+    
+                    return Promise.reject(error);
+                }
+                return json;
+            });
+    }
+
+    return fetch(Url(url, extra["query"]), Header(header))
+        .then(handleResponse)
+        .then((response) => response)
+        .catch( e => {
+            if (e.status === 401){
+
+                removeToken();
+                window.location = "/#/login";
+            }
+            return Promise.reject(e)
+        })
+}
+
+
+export function fetcherFile(url = Url("/url-not-filled", {}), header = {}, extra = {}) {
+
+    return fetch(Url(url, extra["query"]), Header(header))
+        .then((response) => response)
+        .catch( e => {
+            if (e.status === 401){
+
+                removeToken();
+                window.location = "/#/login";
+            }
+            return Promise.reject(e)
+        })
+}

src/utils/constants.js

@@ -0,0 +1,41 @@
+module.exports = {
+
+    //MESSAGES
+    SUCCESS_MESSAGE : "عملیات با موفقیت انجام شد",
+    ERROR_MESSAGE: "با خطا همراه بود",
+    CONFLICT_MESSAGE: "مشکلی به وجود آمده است",
+
+    // ROUTES
+    BASE_URL: "http://192.168.0.124:8003/api",
+    MEDIA_URL: "http://feeder.binainst.ir/",
+    PREFIX:"",
+    LOGIN_PATH: "/auth/token/",
+    USER_PROFILE: "/auth/profile/",
+    PROJECT_LIST:"/project/",
+    PROJECT_DETAIL: (id) => `/project/${id}/`,
+    PROJECT_SUBJECTS: (id) => `/project/${id}/subjects/`,
+    PROJECT_TAGS: (id) => `/project/${id}/tags/`,
+    PROJECT_KEYWORDS: (id) => `/project/${id}/keywords/`,
+    SUBJECT_LIST: "/subject/",
+    SUBJECT_DETAIL: (id) => `/subject/${id}/`,
+    USERS_LIST: "/project/users/",
+    BIAS_LIST: "/favoritism/",
+    BIAS_CREATE: (id) => `/favoritism/${id}/`,
+    PROJECTS_STAT: "/project/projects/",
+    TAG_LIST: "/tag/",
+    TAG_DETAIL: (id) => `/tag/${id}/`,
+    TAG_POSTS: (id) => `/project/${id}/post/tagger/`,
+    VALID_TAG_POSTS: (id) => `/project/${id}/tags/`,
+    POST_DETAIL: (id) => `/post/${id}/`,
+    POST_FILTERS: (id) => `/project/${id}/attributes/`,
+    POST_RESTORE: (id) => `/post/${id}/restore/`,
+    SET_POST_TAG: (id) => `/project/post/${id}/attribute/`,
+    PROJECT_POSTS: (id) => `/project/${id}/posts/`,
+    CRAWL_POSTS: (id) => `/media/${id}/crawl/`,
+    PROJECT_ARCHIVE: (id) => `/project/scheduler/${id}/stop/`,
+    PROJECT_ARCHIVE_RESTORE: (id) => `/project/scheduler/${id}/resume/`,
+    PROJECT_EXCEL_REPORT: (id) => `/project/${id}/report/`,
+
+    // PARAMS:
+    COOKIE_EXPIRES: 1 // IN DAYS
+};

src/utils/message.js

@@ -0,0 +1,15 @@
+import {message} from 'antd';
+import {ERROR_MESSAGE, SUCCESS_MESSAGE, CONFLICT_MESSAGE} from './constants';
+
+
+export function error(content = ERROR_MESSAGE) {
+    message.error(content)
+}
+
+export function success(content = SUCCESS_MESSAGE) {
+    message.success(content,2)
+}
+
+export function conflict(content = CONFLICT_MESSAGE) {
+    message.error(content)
+}

src/utils/utils.js

@@ -0,0 +1,66 @@
+import cookie from 'react-cookies';
+import qs from 'qs';
+import {BASE_URL, COOKIE_EXPIRES} from './constants';
+
+export function Arraify(data){
+    if(!data) return []
+    
+    if(Array.isArray(data)){
+        return data
+    }else{
+        return [data]
+    }
+}
+export function Header(options = {}) {
+    let token = Token(), headers = new Headers();
+    headers.set('Accept', 'application/json');
+    headers.set('Content-Type', 'application/json');
+    let heads = options;
+
+    token && headers.set('Authorization',"Bearer "+ token);
+    options.headers && Object.entries(options.headers).forEach(([k, v]) => headers.set(k, v));
+    options.headers = headers;
+
+    if (heads["Accept"]){
+        options.headers.set("Accept", heads["Accept"])
+    }
+    return options;
+}
+
+export function Url(url = "", data = undefined) {
+
+    if (url.charAt(0) !== '/') {url = '/' + url}
+    return BASE_URL + url + (data ? `?${qs.stringify(data, {arrayFormat: 'comma'})}` : ``);
+}
+
+export function setToken(token) {
+    const expires = new Date();
+    expires.setDate(expires.getDate() + COOKIE_EXPIRES);
+    cookie.save('token', token, {path: '/', expires});
+}
+
+export function Token() {
+    let token = cookie.load('token');
+    if (token === 'undefined') {
+        return undefined;
+    }
+
+    return token;
+}
+
+export function removeToken() {
+    cookie.remove('token', {path: '/'});
+}
+
+export function getTokenObject() {
+    let token = Token();
+    if (token !== undefined) {
+        return {Authorization: token}
+    }
+}
+
+export function formatNumber(value) {
+    let f = value.match(/\d+/);
+    if (f) return f[0];
+    return '';
+}