Merge branch 'develop' into master

Reviewed-on: http://85.143.176.51:3000/free-land/front-end/pulls/172

.env.development

@@ -1,6 +1,6 @@
-REACT_APP_CMS_BASE_URL=https://cms.techpal.ru/api
+REACT_APP_CMS_BASE_URL=http://scipaper.ru
-REACT_APP_CMS_APP_NAME=techpal
+REACT_APP_CMS_APP_NAME=scipaper
 REACT_APP_OPENID_PROVIDER_URL=http://auth.techpal.ru/auth/realms/master/protocol/openid-connect/auth?client_id=techpal&response_type=code
-REACT_APP_INTEGRATOR_URL=http://integrator.techpal.ru
+REACT_APP_INTEGRATOR_URL=http://scipaper.ru
-REACT_APP_INTEGRATOR_API_VERSION=/api/1
+REACT_APP_INTEGRATOR_API_VERSION=/v1
 REACT_APP_GRAPHQL_URL=/graphql

.env.production

@@ -1,6 +1,6 @@
-REACT_APP_CMS_BASE_URL=EXT_CMS_BASE_URL
+REACT_APP_CMS_BASE_URL=http://scipaper.ru
-REACT_APP_CMS_APP_NAME=EXT_CMS_APP_NAME
+REACT_APP_CMS_APP_NAME=scipaper
-REACT_APP_OPENID_PROVIDER_URL=EXT_OPENID_PROVIDER_URL
+REACT_APP_OPENID_PROVIDER_URL=http://auth.techpal.ru/auth/realms/master/protocol/openid-connect/auth?client_id=techpal&response_type=code
-REACT_APP_INTEGRATOR_URL=EXT_INTEGRATOR_URL
+REACT_APP_INTEGRATOR_URL=http://scipaper.ru
-REACT_APP_INTEGRATOR_API_VERSION=EXT_INTEGRATOR_API_VERSION
+REACT_APP_INTEGRATOR_API_VERSION=/v1
-REACT_APP_GRAPHQL_URL=EXT_GRAPHQL_URL
+REACT_APP_GRAPHQL_URL=/graphql

.npmrc

@@ -0,0 +1 @@
+legacy-peer-deps=true

.storybook/index.css

@@ -0,0 +1,134 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  @font-face {
+    font-family: "Poppins";
+    src: url("assets/fonts/Poppins-Bold.eot");
+    src: url("assets/fonts/Poppins-Bold.eot?#iefix") format("embedded-opentype"),
+      url("assets/fonts/Poppins-Bold.woff2") format("woff2"),
+      url("assets/fonts/Poppins-Bold.ttf") format("truetype");
+    font-weight: 700;
+    font-style: normal;
+    font-display: swap;
+  }
+
+  @font-face {
+    font-family: "Poppins";
+    src: url("assets/fonts/Poppins-Medium.eot");
+    src: url("assets/fonts/Poppins-Medium.eot?#iefix") format("embedded-opentype"),
+      url("assets/fonts/Poppins-Medium.woff2") format("woff2"),
+      url("assets/fonts/Poppins-Medium.ttf") format("truetype");
+    font-weight: 500;
+    font-style: normal;
+    font-display: swap;
+  }
+
+  @font-face {
+    font-family: "Poppins";
+    src: url("assets/fonts/Poppins-Regular.eot");
+    src: url("assets/fonts/Poppins-Regular.eot?#iefix") format("embedded-opentype"),
+      url("assets/fonts/Poppins-Regular.woff2") format("woff2"),
+      url("assets/fonts/Poppins-Regular.ttf") format("truetype");
+    font-weight: normal;
+    font-style: normal;
+    font-display: swap;
+  }
+
+  @font-face {
+    font-family: "Poppins";
+    src: url("assets/fonts/Poppins-Thin.eot");
+    src: url("assets/fonts/Poppins-Thin.eot?#iefix") format("embedded-opentype"),
+      url("assets/fonts/Poppins-Thin.woff2") format("woff2"),
+      url("assets/fonts/Poppins-Thin.ttf") format("truetype");
+    font-weight: 300;
+    font-style: normal;
+    font-display: swap;
+  }
+
+  html {
+    font-family: "Poppins", -apple-system, "Segoe UI", system-ui, "Roboto",
+      "Helvetica Neue", "Arial";
+    color: var(--color-text);
+  }
+
+  *,
+  ::before,
+  ::after,
+  .theme-dark *,
+  .theme-dark::before,
+  .theme-dark::after {
+    /* ------------------------------- Body color ------------------------------- */
+    --color-aside: #0a0e1a;
+    --color-footer: 10 10 10;
+    --color-text: rgb(38, 38, 38);
+    /* -------------------------------------------------------------------------- */
+    --color-serv: 25 29 43;
+    --color-serv-50: 227 230 237;
+    --color-serv-100: 200 205 223;
+    --color-serv-200: 142 152 189;
+    --color-serv-300: 90 104 155;
+    --color-serv-400: 58 67 100;
+    --color-serv-500: 25 29 43;
+    --color-serv-600: 21 24 35;
+    --color-serv-700: 15 17 26;
+    --color-serv-800: 9 11 16;
+    --color-serv-900: 6 7 10;
+    /* ---------------------------------- Blue ---------------------------------- */
+    --color-blue-50: 240 247 254;
+    --color-blue-100: 221 237 254;
+    --color-blue-200: 182 216 252;
+    --color-blue-300: 137 192 250;
+    --color-blue-400: 74 158 247;
+    --color-blue-500: 9 109 217;
+    --color-blue-600: 8 99 196;
+    --color-blue-700: 7 87 171;
+    --color-blue-800: 6 69 137;
+    --color-blue-900: 4 49 98;
+    /* ---------------------------------- Gray ---------------------------------- */
+    --color-gray-50: 250 250 250;
+    --color-gray-75: 240 240 240;
+    --color-gray-100: 235 235 235;
+    ;
+    --color-gray-200: 214 214 214;
+    --color-gray-300: 191 191 191;
+    --color-gray-400: 166 166 166;
+    --color-gray-500: 140 140 140;
+    --color-gray-600: 115 115 115;
+    --color-gray-700: 89 89 89;
+    --color-gray-800: 64 64 64;
+    --color-gray-900: 38 38 38;
+  }
+
+  /* Dark theme */
+  @media (prefers-color-scheme: dark) {
+    :root {
+      --bg: hsl(var(--hue), 10%, 10%);
+      --fg: hsl(var(--hue), 10%, 90%);
+    }
+  }
+}
+
+@layer components {
+  /* Separate
+    ======================================================================== */
+
+  .separate {
+    @apply flex items-center text-center;
+  }
+
+  .separate::after,
+  .separate::before {
+    content: '';
+    @apply border-b border-gray-300 flex-1;
+  }
+
+  .separate:not(:empty)::after {
+    @apply ml-2;
+  }
+
+  .separate:not(:empty)::before {
+    @apply mr-2;
+  }
+}

.storybook/main.js

@@ -3,7 +3,6 @@ module.exports = {
     "../src/**/*.stories.mdx",
     "../src/**/*.stories.@(js|jsx|ts|tsx)"
   ],
-  "--staticDirs": ["/src/assets/svg/", "../src/components/icons.tsx"],
   "addons": [
     "@storybook/addon-links",
     "@storybook/addon-essentials",
@@ -13,13 +12,5 @@ module.exports = {
   "framework": "@storybook/react",
   "core": {
     "builder": "@storybook/builder-webpack5"
-  },
+  }
-  webpackFinal: async (config, {configType}) => {
-    
-    config.module.rules.push({
-      test: /\.svg$/,
-      loader: require.resolve('@svgr/webpack'),
-    });
-    return config;
-  },
 }

.storybook/main.ts

@@ -0,0 +1,31 @@
+const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
+const Path = require('path');
+
+const AppSourceDir = Path.join(__dirname, '..', 'src');
+
+
+module.exports = {
+  stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
+  addons: [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-interactions",
+    "@storybook/preset-create-react-app",
+    "storybook-addon-pseudo-states",
+  ],
+  framework: "@storybook/react",
+  core: {
+    builder: "@storybook/builder-webpack5",
+  },
+  webpackFinal: async (config, { configType }) => {
+    config.resolve.plugins = [
+      ...(config.resolve.plugins || []),
+      new TsconfigPathsPlugin({
+        extensions: config.resolve.extensions,
+      }),
+    ];
+    config.resolve.alias["@assets"] = Path.resolve(__dirname, '..', 'src', 'assets')
+    console.log(config);
+    return config;
+  },
+};

.storybook/preview.js

@@ -1,68 +1,9 @@
-import "../src/index.css";
+export const parameters = {
-/**
+  actions: { argTypesRegex: "^on[A-Z].*" },
- * Read https://storybook.js.org/docs/react/configure/overview#configure-story-rendering
+  controls: {
- * for more information about the purpose of this file.
+    matchers: {
- *
+      color: /(background|color)$/i,
- * Use preview.js for global code (such as CSS imports or JavaScript mocks)
+      date: /Date$/,
- * that applies to all stories. For example, `import thirdPartyCss.css`.
+    },
- *
+  },
- * This file can have three exports:
+}
- * - decorators - an array of global decorators
- * - parameters - an object of global parameters
- * - globalTypes - definition of globalTypes
- */
-
-/**
- * Decorators
- *
- * A decorator is a way to wrap a story in extra “rendering” functionality.
- *
- * Example:
- *
- * import React from 'react';
- * export const decorators = [(Story) => <div style={{ margin: '3em' }}><Story/></div>];
- *
- * Each story throughout the library will be wrapped in a div with a margin of 3
- */
-
-/**
- * Parameters
- *
- * Most Storybook addons are configured via a parameter-based API.
- * You can set global parameters in this file
- *
- * export const parameters = {
- *   backgrounds: {
- *     values: [
- *       { name: 'red', value: '#f00' },
- *       { name: 'green', value: '#0f0' },
- *     ],
- *   },
- * };
- *
- * With backgrounds, you configure the list of backgrounds that every story can render in.
- */
-
-/**
- * Global Types
- *
- * Global Types allow you to add your own toolbars by creating
- * globalTypes with a toolbar annotation:
- *
- * For example:
- *
- * export const globalTypes = {
- *   theme: {
- *     name: 'Theme',
- *     description: 'Global theme for components',
- *     defaultValue: 'light',
- *     toolbar: {
- *       icon: 'circlehollow',
- *       // array of plain string values or MenuItem shape
- *       items: ['light', 'dark'],
- *       },
- *     },
- *   };
- *
- * Will add a new dropdown in your toolbar with options light and dark.
- **/

.storybook/preview.ts

@@ -0,0 +1,68 @@
+import "./index.css";
+/**
+ * Read https://storybook.js.org/docs/react/configure/overview#configure-story-rendering
+ * for more information about the purpose of this file.
+ *
+ * Use preview.js for global code (such as CSS imports or JavaScript mocks)
+ * that applies to all stories. For example, `import thirdPartyCss.css`.
+ *
+ * This file can have three exports:
+ * - decorators - an array of global decorators
+ * - parameters - an object of global parameters
+ * - globalTypes - definition of globalTypes
+ */
+
+/**
+ * Decorators
+ *
+ * A decorator is a way to wrap a story in extra “rendering” functionality.
+ *
+ * Example:
+ *
+ * import React from 'react';
+ * export const decorators = [(Story) => <div style={{ margin: '3em' }}><Story/></div>];
+ *
+ * Each story throughout the library will be wrapped in a div with a margin of 3
+ */
+
+/**
+ * Parameters
+ *
+ * Most Storybook addons are configured via a parameter-based API.
+ * You can set global parameters in this file
+ *
+ * export const parameters = {
+ *   backgrounds: {
+ *     values: [
+ *       { name: 'red', value: '#f00' },
+ *       { name: 'green', value: '#0f0' },
+ *     ],
+ *   },
+ * };
+ *
+ * With backgrounds, you configure the list of backgrounds that every story can render in.
+ */
+
+/**
+ * Global Types
+ *
+ * Global Types allow you to add your own toolbars by creating
+ * globalTypes with a toolbar annotation:
+ *
+ * For example:
+ *
+ * export const globalTypes = {
+ *   theme: {
+ *     name: 'Theme',
+ *     description: 'Global theme for components',
+ *     defaultValue: 'light',
+ *     toolbar: {
+ *       icon: 'circlehollow',
+ *       // array of plain string values or MenuItem shape
+ *       items: ['light', 'dark'],
+ *       },
+ *     },
+ *   };
+ *
+ * Will add a new dropdown in your toolbar with options light and dark.
+ **/

Dockerfile

@@ -17,22 +17,25 @@ COPY . .
 RUN npm run build
 
 # Bundle static assets with nginx
-FROM nginx:1.21.6 as production
+FROM node:16-alpine as production
 # Copy built assets from builder
-COPY --from=builder /app/build /usr/share/nginx/html
+WORKDIR /app
-# Add nginx.config
+COPY --from=builder /app/build .
-COPY nginx.conf /etc/nginx/conf.d/default.conf
+
-# Expose ports
+# Expose ports
-EXPOSE 80
+EXPOSE 3000
 
-COPY entrypoint.sh .
 COPY .env.production .
 
 ENV NODE_ENV production
+ENV USER_NAME=node_user USER_UID=2000 GROUP_NAME=node_group GROUP_UID=2000
 
-# Execute script
+RUN npm i -g serve \
-RUN ["chmod", "+x", "./entrypoint.sh"]
+    && deluser --remove-home node \
-ENTRYPOINT ["./entrypoint.sh"]
+    && addgroup --g ${GROUP_UID} -S ${GROUP_NAME} \ 
+    && adduser -D -S -s /sbin/nologin -u ${USER_UID} -G ${GROUP_NAME} ${USER_NAME}\
+    && chown -R ${USER_NAME}:${GROUP_NAME} "/app/"
 
-# Start serving
+
-CMD ["nginx", "-g", "daemon off;"]
+USER "${USER_NAME}"
+CMD serve -s .

Makefile

@@ -1,4 +1,4 @@
-PROJECT_NAME=freeland-frontend
+PROJECT_NAME=scipaper-frontend
 
 setup:
 	npm i

entrypoint.sh

@@ -1,4 +1,4 @@
-#!/bin/bash
+#! /bin/bash
 # no verbose
 set +x
 # config

global.d.ts

@@ -11,3 +11,5 @@ export declare global {
     state: any & {idx: number}
   }
 }
+
+declare module "svg-inline-react" 

package.json

@@ -3,11 +3,17 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^6.2.0",
+    "@fortawesome/free-brands-svg-icons": "^6.2.0",
+    "@fortawesome/free-solid-svg-icons": "^6.2.0",
+    "@fortawesome/react-fontawesome": "^0.2.0",
     "@headlessui/react": "^1.6.6",
     "@reduxjs/toolkit": "^1.8.3",
     "@types/node": "^16.11.47",
     "@types/react": "^18.0.15",
+    "@types/react-copy-to-clipboard": "^5.0.4",
     "@types/react-dom": "^18.0.6",
+    "@uiw/react-md-editor": "^3.18.1",
     "axios": "^0.27.2",
     "classnames": "^2.3.1",
     "formik": "^2.2.9",
@@ -19,13 +25,24 @@
     "jwt-decode": "^3.1.2",
     "lodash": "^4.17.21",
     "react": "^18.2.0",
+    "react-copy-to-clipboard": "^5.1.0",
     "react-dom": "^18.2.0",
     "react-hotkeys": "^2.0.0",
     "react-i18next": "^11.18.3",
+    "react-loading-skeleton": "^3.1.0",
+    "react-lottie": "^1.2.3",
+    "react-markdown": "^8.0.3",
     "react-redux": "^8.0.2",
     "react-router-dom": "^6.3.0",
     "react-scripts": "5.0.1",
     "react-scrollbars-custom": "^4.1.0",
+    "react-syntax-highlighter": "^15.5.0",
+    "remark-code-blocks": "^2.0.1",
+    "remark-gfm": "^3.0.1",
+    "storybook-addon-pseudo-states": "^1.15.1",
+    "swiper": "^8.3.2",
+    "tailwindcss": "^3.1.7",
+    "tsconfig-paths-webpack-plugin": "^4.0.0",
     "typescript": "^4.7.4",
     "web-vitals": "^2.1.4",
     "yup": "^0.32.11"
@@ -87,17 +104,21 @@
     "@storybook/preset-create-react-app": "^4.1.2",
     "@storybook/react": "^6.5.9",
     "@storybook/testing-library": "^0.0.13",
+    "@svgr/webpack": "^6.3.1",
+    "@tailwindcss/line-clamp": "^0.4.0",
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^13.3.0",
     "@testing-library/user-event": "^13.5.0",
     "@types/jest": "^27.5.2",
+    "@types/react-lottie": "^1.2.6",
+    "@types/react-syntax-highlighter": "^15.5.5",
     "autoprefixer": "^10.4.8",
     "babel-plugin-named-exports-order": "^0.0.2",
     "jest": "^28.1.3",
     "postcss": "^8.4.14",
     "prop-types": "^15.8.1",
     "react-test-renderer": "^18.2.0",
-    "tailwindcss": "^3.1.7",
+    "tailwind-scrollbar": "^2.0.1",
     "webpack": "^5.74.0"
   }
 }

public/favicon.svg

@@ -1,5 +1,7 @@
-<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <circle cx="11" cy="16" r="8" fill="#FF0000" />
+<path d="M14.4144 23.7511C8.27781 15.6345 1.97719 21.8024 3.62218 27.4753C7.75871 36.521 18.4462 40.5011 27.4937 36.364C30.6123 34.9384 33.2592 32.6525 35.1232 29.7747C30.3791 34.2166 21.7659 33.4741 14.4144 23.7497V23.7511Z" fill="#003A8C"/>
-  <circle cx="25" cy="21" r="3" fill="#0075FF" />
+<path d="M19.9003 18.1624C11.4604 5.36349 1.99988 12.1819 1.99988 20.0029C1.99656 22.5922 2.55489 25.1515 3.63638 27.5043C2.51332 22.2054 8.60318 18.1213 14.273 25.7253C22.5092 36.7685 30.5857 34.8254 35.1069 29.8009C36.5583 27.5725 37.4959 25.0493 37.8517 22.414V22.4487C35.9103 28.4695 27.3438 29.4488 19.9003 18.1624Z" fill="#0050B3"/>
+<path d="M25.6847 12.4357C19.4173 2.09743 11.4696 3.03149 6.09469 8.56864C3.44128 11.7879 1.99328 15.8313 1.99989 20.0028C2.56566 12.4371 11.7164 7.16932 20.0007 20.0028C27.3643 31.4243 36.5384 28.4489 37.8432 22.4812V22.4239C37.9578 21.6113 38.0065 20.7908 37.9889 19.9703V19.1522C34.8 21.434 30.6062 20.5529 25.6832 12.435L25.6847 12.4357Z" fill="#096DD9"/>
+<path d="M25.7278 14.2762C31.4676 23.5022 36.416 21.142 38.0009 19.1685C37.9371 17.7894 37.714 16.4222 37.3361 15.0943C34.6607 15.1516 34.0369 14.704 31.404 10.697C27.3806 4.53122 22.3119 0.369342 13.4568 3.23302C10.5865 4.35754 8.05111 6.19659 6.09116 8.57572C12.1761 2.97705 19.6422 4.49657 25.7278 14.2762Z" fill="#40A9FF"/>
+<path d="M31.0114 11.4889C33.6359 15.5037 35.2335 15.708 37.336 15.095C34.6097 5.51969 24.6358 -0.0323048 15.0593 2.69349C14.5162 2.84763 13.982 3.02747 13.4568 3.23299C21.367 0.737706 26.9774 5.32312 31.0114 11.4889Z" fill="#91D5FF"/>
 </svg>
-  

public/index.html

@@ -24,7 +24,7 @@
       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>Dashboard | Techpal</title>
+    <title>Scipaper</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

public/locales/en/translation.json

@@ -1,7 +1,7 @@
 {
   "serv": {
-    "goHome": "Home",
+    "goHome": "Home page",
-    "noSuchPath": "We don't have this page"
+    "noSuchPath": "We don't have such a page"
   },
   "sidemenu": {
     "dashboard": "Dashboard",
@@ -19,45 +19,130 @@
   "hellousr": "Hello, {{username}}",
   "edit": "Edit",
   "language": "Language",
-  "selectLanguage": "Select language",
+  "selectLanguage": "Select a language",
   "save": "Save",
   "cancel": "Cancel",
   "account": {
-    "info": "Personal information",
+    "info": "Personal Information",
     "mail": "Mail",
-    "connect": "Add account",
+    "connect": "Add Account",
-    "connectedAccounts_one": "Connected account",
+    "connectedAccounts_one": "Linked Account",
-    "connectedAccounts_other": "Connected accounts",
+    "connectedAccounts_other": "Linked Accounts",
-    "settings": "Account settings"
+    "settings": "Account Settings"
   },
   "security": {
     "password": {
       "caption": "Password",
-      "twoFactor": "Two factor authentication (2FA)",
+      "twoFactor": "Two-factor authentication (2FA)",
-      "description": "Keep your account secure by enabling 2FA via SMS or using a temporary one-time passcode (TOTP) from an authenticator app."
+      "description": "Protect your account by enabling 2FA via SMS or using a temporary one-time password (OTP) from the authentication app."
     },
     "activity": {
       "caption": "Device activity"
     }
   },
   "search": {
-    "label": "Search for something.."
+    "label": "We will find something.."
   },
   "subscriptions": {
-    "subscribed": "Service have been connected"
+    "subscribed": "The service is attached to the account"
   },
   "viewHistory": "View history",
-  "logOutEverywhere": "log out from all devices",
+  "logOutEverywhere": "Log out from all devices",
   "back": "Back",
-  "logOut": "Log out",
+  "logOut": "Exit",
   "failures": {
     "subscriptions": {
-      "failure": "Failed to connect service",
+      "failure": "Failed to attach the service to your account",
-      "exists": "Service have already been connected",
+      "exists": "The service was already attached to your account earlier",
-      "confirmation": "Invalid confirmation information provided"
+      "confirmation": "Invalid password"
     },
     "services": {
-      "fork": "Failed to authenticate in service"
+      "fork": "Failed to perform authorization in the service"
     }
+  },
+  "articlePage": {
+    "abstract": "Abstract",
+    "keywords": "Keywords",
+    "interactionButtons":{
+      "abstract": "Abstract",
+      "readFile": "Read File",
+      "download" : "Download",
+      "share" : "Share",
+      "cite" : "Cite",
+      "copied": "Copied"
+      }
+      
+  },
+  "navbar": {
+    "createNew": "Create New",
+    "about": {
+      "navTitle": "About",
+      "aboutProject": "About Scipaper",
+      "contacts": "Contacts",
+      "help": "Help"
+    },
+    "library": {
+      "navTitle": "My library",
+      "publications": "Publications",
+      "favorites": "Favorites",
+      "collections": "Collections",
+      "recentViewed": "History"
+    },
+    "auth": {
+      "signIn": "Sign In",
+      "signUp": "Sign Up"
+    }
+  },
+  "footer": {
+    "accountSettings": "Account Settings",
+    "about": "About Scipaper",
+    "help": "Help",
+    "contactUs": "Contacts",
+    "allRightsReserved": "All rights reserved",
+    "termsOfUse": "Terms of Use",
+    "privacyPolicy": "Privacy Policy",
+    "coockiesPolicy": "coockies Usage Policy",
+    "supportedBy": "Created"
+  },
+  "mainPage": {
+    "title": "Scientific Library with Free Access",
+    "search": "Search",
+    "article_one": "Articles",
+    "article_few": "Articles",
+    "article_many": "Articles",
+    "advancedSearch": "Advanced search",
+    "featuredArticles": {
+      "title": "Featured articles",
+      "descriptionPart1": "Select the category of science you are interested in",
+      "descriptionPart2": "Scientific category",
+      "categories": {
+        "Medical": "Medical",
+        "TechnicsAndTechlonogies": "Technics and Technology",
+        "Fundamental": "Fundamental",
+        "Humanitarian": "Humanitarian",
+        "Agricultural": "Agricultural",
+        "Social": "Social"
+      }
+    },
+    "featuredAuthors": "Featured authors",
+    "more": "See More ",
+    "showAll": "Show all"
+  },
+  "searchResults": {
+    "title": "Search results",
+    "totalResults":"Total results",
+    "nothingFound": "Nothing found"
+  },
+  "filters": {
+    "authors":"Authors",
+    "publicationsType": "Publications Type",
+    "content":"Content",
+    "publisher":"Publisher",
+    "publicationTopic":"Publication Topic",
+    "appliedFitlers":"Applied Fitlers",
+    "clearAll":"Clear All",
+    "enterAuthorsName":"Enter Author Name",
+    "showAll":"Show All"
   }
+
 }

public/locales/ru/translation.json

@@ -59,5 +59,87 @@
     "services": {
       "fork": "Не удалось выполнить авторизацию в сервисе"
     }
+  },
+  "articlePage": {
+    "abstract": "Введение",
+    "keywords": "Ключевые слова",
+    "interactionButtons":{
+      "abstract": "Развернуть",
+      "readFile": "Читать",
+      "download" : "Скачать",
+      "share" : "Поделиться",
+      "cite" : "Цитировать",
+      "copied": "Скопировано"
+    }
+  },
+  "navbar": {
+    "createNew": "Создать статью",
+    "about": {
+      "navTitle": "О проекте",
+      "aboutProject": "О Scipaper",
+      "contacts": "Контакты",
+      "help": "Помощь"
+    },
+    "library": {
+      "navTitle": "Моя библиотека",
+      "publications": "Публикации",
+      "favorites": "Избранное",
+      "collections": "Коллекции",
+      "recentViewed": "История"
+    },
+    "auth": {
+      "signIn": "Вход",
+      "signUp": "Регистрация"
+    }
+  },
+  "footer": {
+    "accountSettings": "Настройки аккаунта",
+    "about": "О scipaper",
+    "help": "Помощь",
+    "contactUs": "Контакты",
+    "allRightsReserved": "Все права защищены",
+    "termsOfUse": "Правила использования",
+    "privacyPolicy": "Политика конфиденциальности",
+    "coockiesPolicy": "Политика использования coockies",
+    "supportedBy": "Создано"
+  },
+  "mainPage": {
+    "title": "Библиотека научных статей с бесплатным доступом",
+    "search": "Поиск",
+    "article_one": "статьи",
+    "article_few": "статей",
+    "article_many": "статей",
+    "advancedSearch": "Расширенный поиск",
+    "featuredArticles": {
+      "title": "Популярные статьи",
+      "descriptionPart1": "Выберете интересующую вас ",
+      "descriptionPart2": "научную категорию",
+      "categories": {
+        "Medical": "Медицина",
+        "TechnicsAndTechlonogies": "Техника и технологии",
+        "Fundamental": "Естественые",
+        "Humanitarian": "Гуманитарные",
+        "Agricultural": "Аuрокультурa",
+        "Social": "Социальные"
+      }
+    },
+    "featuredAuthors": "Популярные авторы",
+    "more": "Больше",
+    "showAll": "Показать все"
+  },
+  "searchResults": {
+    "title": "Результаты поиска",
+    "totalResults":"Всего найдено",
+    "nothingFound": "Ничего не найдено"
+  },
+  "filters": {
+    "authors":"Авторы",
+    "publicationsType": "Публикации",
+    "publisher":"Издатель",
+    "publicationTopic":"Тема публикации",
+    "appliedFitlers":"Фильтры",
+    "clearAll":"Очистить всё",
+    "enterAuthorsName":"Введите имя автора",
+    "showAll":"Показать все"
   }
 }

src/.storybook/main.js

@@ -0,0 +1,23 @@
+module.exports = {
+    stories: ['../**/*.stories.mdx', '../**/*.stories.@(js|jsx|ts|tsx)'],
+    /** Expose public folder to storybook as static */
+    staticDirs: ['../public'],
+    addons: [
+      '@storybook/addon-links',
+      '@storybook/addon-essentials',
+      '@storybook/addon-interactions',
+      'storybook-css-modules-preset',
+      {
+        name: '@storybook/addon-postcss',
+        options: {
+          postcssLoaderOptions: {
+            implementation: require('postcss'),
+          },
+        },
+      },
+    ],
+    framework: '@storybook/react',
+    core: {
+      builder: '@storybook/builder-webpack5',
+    },
+  };

src/.storybook/preview.js

@@ -0,0 +1,3 @@
+export const parameters = {
+    actions: { argTypesRegex: "^on[A-Z].*" },
+  }

src/App.tsx

@@ -2,6 +2,8 @@
 /*                                  Libraries                                 */
 /* -------------------------------------------------------------------------- */
 import React from "react";
+import MainPage from "pages/MainPage";
+
 /* -------------------------------------------------------------------------- */
 /*                         Application root component                         */
 /* -------------------------------------------------------------------------- */
@@ -10,9 +12,7 @@ import React from "react";
  * @return {JSX.Element}
  */
 function App() {
-  return (
+  return <MainPage />;
-    <div>Hello world!</div>
-  );
 }
 
 export default App;

src/article/controller/articleViewModel.ts

@@ -0,0 +1,24 @@
+import type { ArticleStore } from "../domain/articleStore";
+import { getArticleUseCase } from "../useCases/getArticleUseCase";
+import { useCallback, useEffect } from "react";
+
+function useArticleViewModel(store: ArticleStore) {
+  const _getArticle = useCallback(
+    (id: string) => getArticleUseCase(store.getArticle, store.setArticle, id),
+    [store.getArticle, store.setArticle]
+  );
+
+  useEffect(() => {
+    if (store.article != undefined) {
+      _getArticle(store.article.id);
+    }
+  }, [store.article?.id]);
+
+  return {
+    article: store.article,
+    shouldShowLoading: typeof store.article === "undefined" || store.isLoading,
+    hasError: store.hasError,
+  };
+}
+
+export { useArticleViewModel };

src/article/data/articleAPIService.ts

@@ -0,0 +1,36 @@
+import axios from "axios";
+import { Article } from "../domain/articleEntity";
+import { create } from "../domain/articleModel";
+import { FetchArticleByIdDTO } from "./dto/fetch_article_by_id_dto";
+import Failure from "core/failure";
+import { integratorApiClient } from "core/httpClient";
+
+const articleEndpoint = "/papers/"
+
+async function getArticle(id: string): Promise<Article> {
+  try {
+    const response = await integratorApiClient.get<FetchArticleByIdDTO>(
+      // `https://run.mocky.io/v3/62cd4581-d864-4d46-b1d6-02b45b5d1994/${id}`
+      // `https://jsonplaceholder.typicode.com/posts/${id}`
+      // `https://run.mocky.io/v3/066be3d8-0568-439a-8b20-062deed49a97`
+      articleEndpoint + id
+    );
+    const dto = response.data;
+    return create({
+      id: dto.id,
+      topic: [dto.topic],
+      title: dto.title,
+      authors: dto.authors,
+      tags: dto.tags,
+      summary: dto.summary,
+      content: dto.content,
+    });
+  } catch (reason) {
+    if (axios.isAxiosError(reason)) {
+      throw Failure.fromReason(reason, "failures.services.load");
+    }
+    throw reason;
+  }
+}
+
+export { getArticle };

src/article/data/articleActionTypes.ts

@@ -0,0 +1,4 @@
+export const SET_ARTICLE = "SET_ARTICLE";
+export const GET_ARTICLE = "GET_ARTICLE";
+export const GET_ARTICLE_SUCCESS = "GET_ARTICLE.success";
+export const GET_ARTICLE_FAILURE = "GET_ARTICLE.failure";

src/article/data/articleActions.ts

@@ -0,0 +1,23 @@
+import type { Article } from "../domain/articleEntity";
+import { getArticle as getArticleAPI } from "./articleAPIService";
+import * as actionTypes from "./articleActionTypes";
+import { dispatchStatus } from "../../store/index";
+
+const setArticleAction = (article: Article) => (dispatch: any) =>
+  dispatch({ type: actionTypes.SET_ARTICLE, article });
+
+const getArticleAction = (id: string) => (dispatch: any) => {
+  dispatch({ type: actionTypes.GET_ARTICLE });
+
+  return getArticleAPI(id)
+    .then((article) => {
+      dispatchStatus(actionTypes.GET_ARTICLE, ".success", article)(dispatch);
+      return article;
+    })
+    .catch((reason) => {
+      dispatchStatus(actionTypes.GET_ARTICLE, ".failure", reason)(dispatch);
+      return reason;
+    });
+};
+
+export { setArticleAction, getArticleAction };

src/article/data/articleCommonStateStore.ts

@@ -0,0 +1,39 @@
+import React, { useCallback, useState } from "react";
+import { useDispatch } from "react-redux";
+import { ArticleStore } from "../domain/articleStore";
+import type { Article } from "../domain/articleEntity";
+import { getArticle as getArticleAPI } from "./articleAPIService";
+
+const useArticleCommonStore = (): ArticleStore => {
+  const [isLoading, setLoading] = useState<boolean>(false);
+  const [hasError, setError] = useState<boolean>(false);
+  const [article, setArticleState] = useState<Article | undefined>();
+
+  const dispatch = useDispatch();
+
+  const getArticle = useCallback(
+    async (id: string) => {
+      setLoading(true);
+      try {
+        const article = await getArticleAPI(id);
+        setArticleState(article);
+        setLoading(false);
+        return article;
+      } catch (error) {
+        setError(true);
+        return null;
+      }
+    },
+    [dispatch]
+  );
+
+  return {
+    article: article,
+    isLoading,
+    hasError,
+    setArticle: setArticleState,
+    getArticle,
+  };
+};
+
+export { useArticleCommonStore };

src/article/data/articleReducer.ts

@@ -0,0 +1,32 @@
+import { AnyAction } from "@reduxjs/toolkit";
+import type { ArticleStore } from "../domain/articleStore";
+import * as actionTypes from "./articleActionTypes";
+
+type ArticleStoreState = Omit<ArticleStore, "getArticle" | "setArticle">;
+
+const INITIAL_STATE: ArticleStoreState = {
+  article: undefined,
+  isLoading: false,
+  hasError: false,
+};
+
+const articleReducer = (
+  state: ArticleStoreState = INITIAL_STATE,
+  action: AnyAction
+): ArticleStoreState => {
+  switch (action.type) {
+    case actionTypes.SET_ARTICLE:
+      return { ...state, article: action.article };
+    case actionTypes.GET_ARTICLE:
+      return { ...state, isLoading: true };
+    case actionTypes.GET_ARTICLE_SUCCESS:
+      return { ...state, isLoading: false, article: action.payload };
+    case actionTypes.GET_ARTICLE_FAILURE:
+      return { ...state, hasError: true, isLoading: false };
+    default:
+      return state;
+  }
+};
+
+export { articleReducer };
+export type { ArticleStoreState };

src/article/data/articleStoreImplementation.ts

@@ -0,0 +1,35 @@
+import React, { useCallback, useState } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { ArticleStore } from "../domain/articleStore";
+import type { Article } from "../domain/articleEntity";
+import type { ArticleStoreState } from "../data/articleReducer";
+import { getArticleAction, setArticleAction } from "./articleActions";
+import { RootState, useAppSelector } from "store";
+
+const articleSelector = (state: RootState): ArticleStoreState => state.article;
+
+const useArticleStore = (): ArticleStore => {
+  const { isLoading, article, hasError } = useAppSelector(articleSelector);
+
+  const dispatch = useDispatch();
+
+  const setArticle = useCallback(
+    (article: Article) => setArticleAction(article)(dispatch),
+    [dispatch]
+  );
+
+  const getArticle = useCallback(
+    (id: string) => getArticleAction(id)(dispatch),
+    [dispatch]
+  );
+
+  return {
+    article: article,
+    isLoading,
+    hasError,
+    setArticle,
+    getArticle,
+  };
+};
+
+export { useArticleStore };

src/article/data/dto/fetch_article_by_id_dto.ts

@@ -0,0 +1,9 @@
+export interface FetchArticleByIdDTO {
+  id: string;
+  topic: string;
+  title: string;
+  authors: string[];
+  tags: string[];
+  summary: string;
+  content: string;
+}

src/article/domain/articleEntity.ts

@@ -0,0 +1,9 @@
+export interface Article {
+  id: string;
+  title: string;
+  content: string;
+  topic?: string[];
+  authors?: string[];
+  tags?: string[];
+  summary?: string;
+}

src/article/domain/articleModel.ts

@@ -0,0 +1,14 @@
+import { CreateArticleParams } from "article/useCases/params/create_article_params";
+import { Article } from "./articleEntity";
+
+const create = (props: CreateArticleParams): Article => ({
+  id: props.id,
+  topic: props.topic,
+  title: props.title,
+  authors: props.authors,
+  tags: props.tags,
+  summary: props.summary,
+  content: props.content,
+});
+
+export { create };

src/article/domain/articleStore.ts

@@ -0,0 +1,13 @@
+import { Article } from './articleEntity';
+interface ArticleStore {
+  // State
+  article: Article | undefined;
+  isLoading: boolean;
+  hasError: boolean;
+
+  // Actions
+  setArticle(article?: Article): void;
+  getArticle(identifier: string): Promise<Article | null>;
+}
+
+export type { ArticleStore };

src/article/useCases/getArticleUseCase.ts

@@ -0,0 +1,16 @@
+import { Article } from "article/domain/articleEntity";
+import type { ArticleStore } from "../domain/articleStore";
+
+const getArticleUseCase = async (
+  getArticle: ArticleStore["getArticle"],
+  setArticle: ArticleStore["setArticle"],
+  id: Article["id"]
+): Promise<Article | null> => {
+  const article = await getArticle(id);
+  if (article) {
+    await setArticle(article);
+  }
+  return article;
+};
+
+export { getArticleUseCase };

src/article/useCases/params/create_article_params.ts

@@ -0,0 +1,9 @@
+export interface CreateArticleParams {
+  id: string;
+  topic: string[];
+  title: string;
+  authors: string[];
+  tags: string[];
+  summary: string;
+  content: string;
+}

src/assets/svg/Arrow-Down.svg

@@ -1,4 +0,0 @@
-<svg fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<rect width="2.54558" height="12.7279" rx="1.27279" transform="matrix(0.707107 0.707107 0.707107 -0.707107 10.2001 16)"/>
-<rect width="2.54558" height="12.7279" rx="1.27279" transform="matrix(0.707107 -0.707107 -0.707107 -0.707107 12 17.8)"/>
-</svg>

src/assets/svg/Arrow-Left.svg

@@ -1,4 +0,0 @@
-<svg fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<rect width="2.54558" height="12.7279" rx="1.27279" transform="matrix(-0.707107 0.707107 0.707107 0.707107 8.79997 10.2001)"/>
-<rect width="2.54558" height="12.7279" rx="1.27279" transform="matrix(0.707107 0.707107 0.707107 -0.707107 6.99998 12)"/>
-</svg>

src/assets/svg/Delete.svg

@@ -1,5 +0,0 @@
-<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M17.0689 21H6.93112C6.40648 21 5.97104 20.5946 5.93366 20.0712L5.07652 8.07125C5.03517 7.49238 5.49363 7 6.07398 7H17.926C18.5064 7 18.9648 7.49238 18.9235 8.07125L18.0663 20.0712C18.029 20.5946 17.5935 21 17.0689 21Z" stroke-width="2"/>
-<path d="M3 7H21" stroke-width="2" stroke-linecap="round"/>
-<path d="M7 7V4C7 3.44772 7.44772 3 8 3H16C16.5523 3 17 3.44772 17 4V7" stroke-width="2" stroke-linecap="round"/>
-</svg>

src/assets/svg/Error.svg

@@ -1,5 +0,0 @@
-<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M12 8V12" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M12 16H12.01" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>

src/assets/svg/Filetext.svg

@@ -1,7 +0,0 @@
-<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 20V4C4 2.89543 4.89543 2 6 2H13.1716C13.702 2 14.2107 2.21071 14.5858 2.58579L19.4142 7.41421C19.7893 7.78929 20 8.29799 20 8.82843V20C20 21.1046 19.1046 22 18 22H6C4.89543 22 4 21.1046 4 20Z" stroke-width="2" stroke-linecap="round"/>
-<path d="M8 14H16" stroke-width="2" stroke-linecap="round"/>
-<path d="M14 8L19 8" stroke-width="2" stroke-linecap="round"/>
-<path d="M14 3V8" stroke-width="2" stroke-linecap="round"/>
-<path d="M8 18H16" stroke-width="2" stroke-linecap="round"/>
-</svg>

src/assets/svg/Folder.svg

@@ -1,5 +0,0 @@
-<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M20 19H4C3.44772 19 3 18.5523 3 18V6C3 5.44772 3.44772 5 4 5H8.58579C8.851 5 9.10536 5.10536 9.29289 5.29289L11.7071 7.70711C11.8946 7.89464 12.149 8 12.4142 8H20C20.5523 8 21 8.44772 21 9V18C21 18.5523 20.5523 19 20 19Z" fill="none" stroke-width="2"/>
-<path d="M13 11C13 10.4477 12.5523 10 12 10C11.4477 10 11 10.4477 11 11H13ZM11 16C11 16.5523 11.4477 17 12 17C12.5523 17 13 16.5523 13 16H11ZM11 11V16H13V11H11Z" stroke="none" />
-<path d="M14.5 14.5C15.0523 14.5 15.5 14.0523 15.5 13.5C15.5 12.9477 15.0523 12.5 14.5 12.5L14.5 14.5ZM9.5 12.5C8.94772 12.5 8.5 12.9477 8.5 13.5C8.5 14.0523 8.94772 14.5 9.5 14.5L9.5 12.5ZM14.5 12.5L9.5 12.5L9.5 14.5L14.5 14.5L14.5 12.5Z" stroke="none" />
-</svg>

src/assets/svg/Key.svg

@@ -1,6 +0,0 @@
-<svg fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M16.704 3.70394C15.0989 2.09889 12.4966 2.09889 10.8915 3.70395C9.28647 5.309 9.28647 7.91132 10.8915 9.51638L14.379 13.0038C15.984 14.6089 18.5864 14.6089 20.1914 13.0038C21.7965 11.3988 21.7965 8.79647 20.1914 7.19141L16.704 3.70394ZM15.3387 5.28955C14.5485 4.49935 13.2673 4.49935 12.4771 5.28955C11.6869 6.07975 11.6869 7.36091 12.4771 8.15111L15.7442 11.4182C16.5344 12.2084 17.8156 12.2084 18.6058 11.4182C19.396 10.628 19.396 9.34689 18.6058 8.55669L15.3387 5.28955Z" />
-    <path d="M12.7875 11.2568L4.59995 19.4443" stroke-width="2" stroke-linecap="round"/>
-    <path d="M6.42353 17.6207L8.8798 20.077" stroke-width="2" stroke-linecap="round"/>
-    <path d="M9.25196 14.7923L12.527 18.0673" stroke-width="2" stroke-linecap="round"/>
-</svg>

src/assets/svg/List.svg

@@ -1,8 +0,0 @@
-<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect x="2" y="3" width="4" height="4" rx="2"/>
-<rect x="9" y="4" width="13" height="2" rx="1"/>
-<rect x="2" y="10" width="4" height="4" rx="2"/>
-<rect x="9" y="11" width="13" height="2" rx="1"/>
-<rect x="2" y="17" width="4" height="4" rx="2"/>
-<rect x="9" y="18" width="13" height="2" rx="1"/>
-</svg>

src/assets/svg/More.svg

@@ -1,5 +0,0 @@
-<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect x="21" y="10" width="4" height="4" rx="2" transform="rotate(90 21 10)" />
-<rect x="14" y="10" width="4" height="4" rx="2" transform="rotate(90 14 10)" />
-<rect x="7" y="10" width="4" height="4" rx="2" transform="rotate(90 7 10)" />
-</svg>

src/assets/svg/Printer.svg

@@ -1,5 +0,0 @@
-<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M9 18H5C3.89543 18 3 17.1046 3 16V11C3 9.89543 3.89543 9 5 9H14.25H19C20.1046 9 21 9.89543 21 11V11.7V16C21 17.1046 20.1046 18 19 18H15" stroke-width="2" stroke-linecap="round"/>
-<path d="M7 9V5C7 3.89543 7.89543 3 9 3H13.25H15.2C16.1941 3 17 3.80589 17 4.8V9H7Z"  stroke-width="2" stroke-linecap="round"/>
-<path d="M9 20V15C9 14.4477 9.44772 14 10 14H12.75H14C14.5523 14 15 14.4477 15 15V16.1V20C15 20.5523 14.5523 21 14 21H10C9.44772 21 9 20.5523 9 20Z" stroke-width="2" stroke-linecap="round"/>
-</svg>

src/assets/svg/Share.svg

@@ -1,3 +0,0 @@
-<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M17.5 2C15.567 2 14 3.567 14 5.5C14 5.76819 14.0302 6.02934 14.0873 6.28023L8.87961 9.2237C8.15209 8.46927 7.13084 8 6 8C3.79086 8 2 9.79086 2 12C2 14.2091 3.79086 16 6 16C7.13084 16 8.15208 15.5307 8.87961 14.7763L14.0873 17.7198C14.0302 17.9707 14 18.2318 14 18.5C14 20.433 15.567 22 17.5 22C19.433 22 21 20.433 21 18.5C21 16.567 19.433 15 17.5 15C16.5572 15 15.7014 15.3728 15.0721 15.979L9.86462 13.0357C9.95292 12.7054 10 12.3582 10 12C10 11.6418 9.95292 11.2946 9.86462 10.9643L15.0721 8.02097C15.7014 8.6272 16.5572 9 17.5 9C19.433 9 21 7.433 21 5.5C21 3.567 19.433 2 17.5 2ZM6 10C4.89543 10 4 10.8954 4 12C4 13.1046 4.89543 14 6 14C7.10457 14 8 13.1046 8 12C8 10.8954 7.10457 10 6 10ZM16 5.5C16 4.67157 16.6716 4 17.5 4C18.3284 4 19 4.67157 19 5.5C19 6.32843 18.3284 7 17.5 7C16.6716 7 16 6.32843 16 5.5ZM17.5 17C16.6716 17 16 17.6716 16 18.5C16 19.3284 16.6716 20 17.5 20C18.3284 20 19 19.3284 19 18.5C19 17.6716 18.3284 17 17.5 17Z"/>
-</svg>

src/assets/svg/agricultural.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16.5495 18.1523C20.0358 21.1083 21.1165 25.66 19.7396 29.9152H30.4102C31.4258 26.9366 34.4857 25.2281 37.9199 26.6722L39.1536 19.4836C39.362 18.2715 38.138 17.2497 36.8978 17.2497H30.0098V11.8372C30.0098 11.415 29.668 11.0636 29.2448 11.0442V8.24616H28.1901V11.0442C27.7767 11.0733 27.4479 11.4182 27.4479 11.834V17.2497H22.0703C23.099 12.4304 21.8978 10.7831 21.2044 5.88004C20.931 5.1773 20.3939 5.01934 19.7884 5H7.25586C6.6276 5.00645 6.19141 5.31591 5.96354 5.96063L5.11393 14.068L3.42122 16.0473C2.68229 16.8951 2.89714 16.6984 3.57747 17.7106C3.69466 17.6268 3.81185 17.543 3.93229 17.4656C7.49349 15.1576 13.1966 15.5734 16.5495 18.1523ZM29.0951 6.74397C29.1439 6.69561 29.222 6.69239 29.2741 6.74074C29.3229 6.7891 29.3262 6.86646 29.2773 6.91804C29.1829 7.01475 29.2188 7.15336 29.2513 7.28231C29.3099 7.50151 29.362 7.70137 29.0951 7.85288C29.0332 7.88834 28.9583 7.86578 28.9225 7.80775C28.8867 7.74973 28.9128 7.67236 28.9714 7.6369C29.069 7.5821 29.0397 7.46928 29.0072 7.34678C28.9583 7.15336 28.903 6.94383 29.0951 6.74397ZM28.3333 6.74397C28.3822 6.69561 28.4603 6.69239 28.5124 6.74074C28.5612 6.7891 28.5645 6.86646 28.5156 6.91804C28.4212 7.01475 28.457 7.15336 28.4896 7.28231C28.5482 7.50151 28.6003 7.70137 28.3333 7.85288C28.2715 7.88834 28.1966 7.86578 28.1608 7.80775C28.125 7.7465 28.1478 7.67236 28.2064 7.6369C28.304 7.5821 28.2747 7.46928 28.2422 7.34678C28.1934 7.15336 28.138 6.94383 28.3333 6.74397ZM14.4694 7.68203V13.6618C15.8659 13.9745 17.2461 14.4032 18.6035 14.9512C19.3132 15.2381 20.1497 14.313 20 13.5683L19.0885 9.06173C18.9388 8.31708 18.4603 7.67881 17.6921 7.67881H14.4694V7.68203ZM13.0827 13.3878V7.68203H9.63216C8.86393 7.68203 8.41146 8.32353 8.23568 9.06496L7.63021 11.6503C7.45768 12.3917 8.25846 13.0203 9.02669 13.0332C10.3939 13.0461 11.7448 13.1654 13.0827 13.3878ZM35.7585 27.2428C38.099 27.2428 40 29.1222 40 31.4432C40 33.7609 38.1022 35.6403 35.7585 35.6403C33.4147 35.6403 31.5202 33.7609 31.5202 31.4432C31.5202 29.1222 33.418 27.2428 35.7585 27.2428ZM9.05925 17.8267C14.0625 17.8267 18.1185 21.8433 18.1185 26.798C18.1185 31.7526 14.0625 35.7692 9.05925 35.7692C4.05599 35.7692 0 31.7526 0 26.798C0 21.8433 4.05599 17.8267 9.05925 17.8267ZM9.05925 21.9755C11.748 21.9755 13.929 24.1353 13.929 26.798C13.929 29.4607 11.748 31.6205 9.05925 31.6205C6.37044 31.6205 4.18945 29.4607 4.18945 26.798C4.18945 24.1353 6.37044 21.9755 9.05925 21.9755ZM35.7585 29.3124C36.9466 29.3124 37.9069 30.2666 37.9069 31.4399C37.9069 32.6166 36.9434 33.5675 35.7585 33.5675C34.5703 33.5675 33.61 32.6133 33.61 31.4399C33.61 30.2666 34.5736 29.3124 35.7585 29.3124ZM29.4564 19.8737H34.8112L34.6908 20.4862H29.3522L29.4564 19.8737ZM27.5781 23.1746H34.8112L34.6908 23.7871H27.4707L27.5781 23.1746ZM28.2454 21.5242H34.8145L34.694 22.1366H28.138L28.2454 21.5242Z" fill="#8C8C8C"/>
+</svg>

src/assets/svg/arrow-big-right.svg

@@ -1,3 +1,3 @@
-<svg fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M3 10.5C2.44772 10.5 2 10.9477 2 11.5C2 12.0523 2.44772 12.5 3 12.5V10.5ZM20.7071 12.2071C21.0976 11.8166 21.0976 11.1834 20.7071 10.7929L14.3431 4.42893C13.9526 4.03841 13.3195 4.03841 12.9289 4.42893C12.5384 4.81946 12.5384 5.45262 12.9289 5.84315L18.5858 11.5L12.9289 17.1569C12.5384 17.5474 12.5384 18.1805 12.9289 18.5711C13.3195 18.9616 13.9526 18.9616 14.3431 18.5711L20.7071 12.2071ZM3 12.5H20V10.5H3V12.5Z"/>
+<path d="M3 10.5C2.44772 10.5 2 10.9477 2 11.5C2 12.0523 2.44772 12.5 3 12.5V10.5ZM20.7071 12.2071C21.0976 11.8166 21.0976 11.1834 20.7071 10.7929L14.3431 4.42893C13.9526 4.03841 13.3195 4.03841 12.9289 4.42893C12.5384 4.81946 12.5384 5.45262 12.9289 5.84315L18.5858 11.5L12.9289 17.1569C12.5384 17.5474 12.5384 18.1805 12.9289 18.5711C13.3195 18.9616 13.9526 18.9616 14.3431 18.5711L20.7071 12.2071ZM3 12.5H20V10.5H3V12.5Z" stroke="none" />
 </svg>

src/assets/svg/arrow-down.svg

@@ -0,0 +1,4 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+<rect width="2.54558" height="12.7279" rx="1.27279" transform="matrix(0.707107 0.707107 0.707107 -0.707107 10.2001 16)" stroke="none" />
+<rect width="2.54558" height="12.7279" rx="1.27279" transform="matrix(0.707107 -0.707107 -0.707107 -0.707107 12 17.8)" stroke="none" />
+</svg>

src/assets/svg/arrow-left.svg

@@ -0,0 +1,4 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+<rect width="2.54558" height="12.7279" rx="1.27279" transform="matrix(-0.707107 0.707107 0.707107 0.707107 8.80005 10.2001)" stroke="none" />
+<rect width="2.54558" height="12.7279" rx="1.27279" transform="matrix(0.707107 0.707107 0.707107 -0.707107 7 12)" stroke="none" />
+</svg>

src/assets/svg/arrow-right.svg

@@ -1,4 +1,4 @@
-<svg fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<rect x="16" y="10.2001" width="2.54558" height="12.7279" rx="1.27279" transform="rotate(45 16 10.2001)"/>
+<rect x="16" y="10.2001" width="2.54558" height="12.7279" rx="1.27279" transform="rotate(45 16 10.2001)" stroke="none" />
-<rect x="17.8" y="12" width="2.54558" height="12.7279" rx="1.27279" transform="rotate(135 17.8 12)"/>
+<rect x="17.8" y="12" width="2.54558" height="12.7279" rx="1.27279" transform="rotate(135 17.8 12)" stroke="none" />
 </svg>

src/assets/svg/arrow-up.svg

@@ -0,0 +1,4 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+<rect x="10.2001" y="8.79999" width="2.54558" height="12.7279" rx="1.27279" transform="rotate(-45 10.2001 8.79999)" stroke="none" />
+<rect x="12" y="7" width="2.54558" height="12.7279" rx="1.27279" transform="rotate(45 12 7)" stroke="none" />
+</svg>

src/assets/svg/background.svg

@@ -0,0 +1,7 @@
+<svg width="1187" height="1234" viewBox="0 0 1187 1234" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M408.998 745.256C206.829 467.159 -0.745132 678.488 53.4493 872.858C189.728 1182.79 541.828 1319.16 839.898 1177.41C942.643 1128.57 1029.84 1050.24 1091.25 951.643C934.96 1103.83 651.196 1078.4 408.998 745.208V745.256Z" fill="#F0F0F0"/>
+<path d="M589.732 553.768C311.677 115.242 0.000483082 348.859 0.000483082 616.83C-0.108684 705.549 18.2856 793.237 53.9153 873.85C16.9159 692.296 217.547 552.363 404.339 812.896C675.684 1191.27 941.763 1124.69 1090.72 952.538C1138.53 876.188 1169.42 789.736 1181.14 699.443V700.63C1117.18 906.92 834.959 940.474 589.732 553.768Z" fill="#F5F5F5"/>
+<path d="M780.298 357.556C573.819 3.33809 311.98 35.3415 134.904 225.06C47.4877 335.363 -0.21692 473.901 0.000741558 616.829C18.6403 357.604 320.112 177.116 593.041 616.829C835.635 1008.16 1137.87 906.216 1180.86 701.744V699.781C1184.64 671.939 1186.24 643.826 1185.66 615.715V587.685C1080.6 665.864 942.439 635.678 780.252 357.532L780.298 357.556Z" fill="#FAFAFA"/>
+<path d="M781.72 420.618C970.818 736.727 1133.84 655.859 1186.06 588.242C1183.96 540.989 1176.61 494.146 1164.16 448.648C1076.01 450.611 1055.46 435.275 968.721 297.983C836.17 86.7264 669.183 -55.8716 377.451 42.2463C282.888 80.7758 199.359 143.787 134.788 225.303C335.256 33.4762 581.228 85.5393 781.72 420.618Z" fill="white"/>
+<path d="M955.787 325.116C1042.25 462.675 1094.88 469.676 1164.15 448.672C1074.33 120.595 745.743 -69.6327 430.245 23.761C412.352 29.0424 394.753 35.204 377.449 42.2459C638.053 -43.2499 822.887 113.86 955.787 325.116Z" fill="white"/>
+</svg>

src/assets/svg/bell-notification.svg

@@ -0,0 +1,5 @@
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18 8C18 6.4087 17.3679 4.88258 16.2426 3.75736C15.1174 2.63214 13.5913 2 12 2C10.4087 2 8.88258 2.63214 7.75736 3.75736C6.63214 4.88258 6 6.4087 6 8C6 15 3 17 3 17H21C21 17 18 15 18 8Z" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M13.73 21C13.5542 21.3031 13.3018 21.5547 12.9982 21.7295C12.6946 21.9044 12.3504 21.9965 12 21.9965C11.6496 21.9965 11.3054 21.9044 11.0018 21.7295C10.6981 21.5547 10.4458 21.3031 10.27 21" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<rect x="13" y="1" width="10" height="10" rx="5" stroke="white" fill="#FF4D4F" stroke-width="2"/>
+</svg>

src/assets/svg/bell.svg

@@ -0,0 +1,4 @@
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18 8C18 6.4087 17.3679 4.88258 16.2426 3.75736C15.1174 2.63214 13.5913 2 12 2C10.4087 2 8.88258 2.63214 7.75736 3.75736C6.63214 4.88258 6 6.4087 6 8C6 15 3 17 3 17H21C21 17 18 15 18 8Z" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M13.73 21C13.5542 21.3031 13.3018 21.5547 12.9982 21.7295C12.6946 21.9044 12.3504 21.9965 12 21.9965C11.6496 21.9965 11.3054 21.9044 11.0018 21.7295C10.6981 21.5547 10.4458 21.3031 10.27 21"  fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

src/assets/svg/bookmark-filled.svg

@@ -1,3 +1,3 @@
 <svg fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M6 21.3242V4C6 3.44772 6.44772 3 7 3H17C17.5523 3 18 3.44771 18 4V21.3242C18 21.5563 17.7112 21.6631 17.5602 21.4869L12.7593 15.8858C12.3602 15.4202 11.6398 15.4202 11.2407 15.8858L6.43981 21.4869C6.28876 21.6631 6 21.5563 6 21.3242Z" stroke-width="2"/>
+<path d="M6 21.3242V4C6 3.44772 6.44772 3 7 3H17C17.5523 3 18 3.44771 18 4V21.3242C18 21.5563 17.7112 21.6631 17.5602 21.4869L12.7593 15.8858C12.3602 15.4202 11.6398 15.4202 11.2407 15.8858L6.43981 21.4869C6.28876 21.6631 6 21.5563 6 21.3242Z" stroke-width="2" />
 </svg>

src/assets/svg/bookmark-outlined.svg

@@ -0,0 +1,3 @@
+<svg fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+<path d="M6 21.3242V4C6 3.44772 6.44772 3 7 3H17C17.5523 3 18 3.44771 18 4V21.3242C18 21.5563 17.7112 21.6631 17.5602 21.4869L12.7593 15.8858C12.3602 15.4202 11.6398 15.4202 11.2407 15.8858L6.43981 21.4869C6.28876 21.6631 6 21.5563 6 21.3242Z" stroke-width="2" fill="none" />
+</svg>

src/assets/svg/caret-down.svg

@@ -1,3 +1,3 @@
 <svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M13.1315 4.6875H2.86897C2.56116 4.6875 2.38929 5.0125 2.57991 5.23438L7.71116 11.1844C7.85804 11.3547 8.14085 11.3547 8.28929 11.1844L13.4205 5.23438C13.6112 5.0125 13.4393 4.6875 13.1315 4.6875Z"/>
+<path d="M13.1315 4.6875H2.86897C2.56116 4.6875 2.38929 5.0125 2.57991 5.23438L7.71116 11.1844C7.85804 11.3547 8.14085 11.3547 8.28929 11.1844L13.4205 5.23438C13.6112 5.0125 13.4393 4.6875 13.1315 4.6875Z" stroke="none" />
 </svg>

src/assets/svg/caret-left.svg

@@ -1,3 +1,3 @@
 <svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M11.3125 13.131L11.3125 2.86855C11.3125 2.56073 10.9875 2.38886 10.7657 2.57948L4.81566 7.71073C4.64534 7.85761 4.64534 8.14042 4.81566 8.28886L10.7657 13.4201C10.9875 13.6107 11.3125 13.4389 11.3125 13.131Z" />
+<path d="M11.3125 13.131L11.3125 2.86855C11.3125 2.56073 10.9875 2.38886 10.7657 2.57948L4.81566 7.71073C4.64534 7.85761 4.64534 8.14042 4.81566 8.28886L10.7657 13.4201C10.9875 13.6107 11.3125 13.4389 11.3125 13.131Z" stroke="none" />
 </svg>

src/assets/svg/caret-right.svg

@@ -1,3 +1,3 @@
 <svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M4.68793 2.86853L4.68793 13.131C4.68793 13.4388 5.01293 13.6107 5.2348 13.4201L11.1848 8.28884C11.3551 8.14196 11.3551 7.85915 11.1848 7.71071L5.2348 2.57946C5.01293 2.38884 4.68793 2.56071 4.68793 2.86853Z" />
+<path d="M4.68793 2.86853L4.68793 13.131C4.68793 13.4388 5.01293 13.6107 5.2348 13.4201L11.1848 8.28884C11.3551 8.14196 11.3551 7.85915 11.1848 7.71071L5.2348 2.57946C5.01293 2.38884 4.68793 2.56071 4.68793 2.86853Z" stroke="none" />
 </svg>

src/assets/svg/caret-up.svg

@@ -1,3 +1,3 @@
 <svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M13.1315 11.3121H2.86897C2.56116 11.3121 2.38929 10.9871 2.57991 10.7653L7.71116 4.81526C7.85804 4.64495 8.14085 4.64495 8.28929 4.81526L13.4205 10.7653C13.6112 10.9871 13.4393 11.3121 13.1315 11.3121Z" />
+<path d="M13.1315 11.3121H2.86897C2.56116 11.3121 2.38929 10.9871 2.57991 10.7653L7.71116 4.81526C7.85804 4.64495 8.14085 4.64495 8.28929 4.81526L13.4205 10.7653C13.6112 10.9871 13.4393 11.3121 13.1315 11.3121Z" stroke="none" />
 </svg>

src/assets/svg/chart.svg

@@ -0,0 +1,6 @@
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="5" y="12" width="2" height="8" rx="1" stroke="none" />
+<rect x="9" y="6" width="2" height="14" rx="1"  stroke="none" />
+<rect x="13" y="8" width="2" height="12" rx="1" stroke="none" />
+<rect x="17" y="4" width="2" height="16" rx="1" stroke="none" />
+</svg>

src/assets/svg/chevrones-left.svg

@@ -1,6 +1,6 @@
 <svg fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-    <rect width="2.54558" height="12.7279" rx="1.27279" transform="matrix(-0.707107 0.707107 0.707107 0.707107 12.8 10.2001)"/>
+    <rect width="2.54558" height="12.7279" rx="1.27279" transform="matrix(-0.707107 0.707107 0.707107 0.707107 12.8 10.2001)" stroke="none" />
-    <rect width="2.54558" height="12.7279" rx="1.27279" transform="matrix(0.707107 0.707107 0.707107 -0.707107 11 12)"/>
+    <rect width="2.54558" height="12.7279" rx="1.27279" transform="matrix(0.707107 0.707107 0.707107 -0.707107 11 12)" stroke="none" />
-    <rect width="2.54558" height="12.7279" rx="1.27279" transform="matrix(-0.707107 0.707107 0.707107 0.707107 3.79999 10.2001)"/>
+    <rect width="2.54558" height="12.7279" rx="1.27279" transform="matrix(-0.707107 0.707107 0.707107 0.707107 3.79999 10.2001)" stroke="none"/>
-    <rect width="2.54558" height="12.7279" rx="1.27279" transform="matrix(0.707107 0.707107 0.707107 -0.707107 2 12)"/>
+    <rect width="2.54558" height="12.7279" rx="1.27279" transform="matrix(0.707107 0.707107 0.707107 -0.707107 2 12)" stroke="none" />
 </svg>

src/assets/svg/chevrones-right.svg

@@ -1,6 +1,6 @@
 <svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect width="2" height="10" rx="1" transform="matrix(0.707107 -0.707107 -0.707107 -0.707107 13.8284 9.41425)" />
+<rect width="2" height="10" rx="1" transform="matrix(0.707107 -0.707107 -0.707107 -0.707107 13.8284 9.41425)" stroke="none" />
-<rect width="2" height="10" rx="1" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 15.2426 8.00006)" />
+<rect width="2" height="10" rx="1" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 15.2426 8.00006)" stroke="none" />
-<rect width="2" height="10" rx="1" transform="matrix(0.707107 -0.707107 -0.707107 -0.707107 7.82843 9.41425)" />
+<rect width="2" height="10" rx="1" transform="matrix(0.707107 -0.707107 -0.707107 -0.707107 7.82843 9.41425)" stroke="none" />
-<rect width="2" height="10" rx="1" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 9.24265 8.00006)" />
+<rect width="2" height="10" rx="1" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 9.24265 8.00006)" stroke="none" />
 </svg>

src/assets/svg/circle.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="3" y="3" width="18" height="18" rx="9" stroke="none" />
+</svg>

src/assets/svg/copy.svg

@@ -1,4 +1,4 @@
 <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M17 8V20C17 21.1046 16.1046 22 15 22H10H5C3.89543 22 3 21.1046 3 20V8C3 6.89543 3.89543 6 5 6H15C16.1046 6 17 6.89543 17 8Z" stroke-width="2" stroke-linecap="round"/>
+<path d="M17 8V20C17 21.1046 16.1046 22 15 22H10H5C3.89543 22 3 21.1046 3 20V8C3 6.89543 3.89543 6 5 6H15C16.1046 6 17 6.89543 17 8Z" fill="none" stroke-width="2" stroke-linecap="round"/>
-<path d="M7 6V4C7 2.89543 7.89543 2 9 2H19C20.1046 2 21 2.89543 21 4V17C21 18.1046 20.1046 19 19 19H17"  stroke-width="2" stroke-linecap="round"/>
+<path d="M7 6V4C7 2.89543 7.89543 2 9 2H19C20.1046 2 21 2.89543 21 4V17C21 18.1046 20.1046 19 19 19H17" fill="none" stroke-width="2" stroke-linecap="round"/>
 </svg>