init

2024-07-09 12:47:31 +03:00 · 2024-07-09 12:47:31 +03:00 · e9d53d4339
commit e9d53d4339
137 changed files with 7361 additions and 0 deletions
--- a/.browserslistrc
+++ b/.browserslistrc
@ -0,0 +1,4 @@
+> 1%
+last 2 versions
+not dead
+not ie 11
--- a/.editorconfig
+++ b/.editorconfig
@ -0,0 +1,5 @@
+[*.{js,jsx,ts,tsx,vue}]
+indent_style = space
+indent_size = 2
+trim_trailing_whitespace = true
+insert_final_newline = true
--- a/.env
+++ b/.env
@ -0,0 +1 @@
+VITE_APP_API_BASE_URL= ""
--- a/.eslintrc.js
+++ b/.eslintrc.js
@ -0,0 +1,13 @@
+module.exports = {
+  root: true,
+  env: {
+    node: true,
+  },
+  extends: [
+    'plugin:vue/vue3-essential',
+    'eslint:recommended',
+  ],
+  rules : [
+    'vue/multi-word-component-names' = off
+  ]
+}
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,22 @@
+.DS_Store
+node_modules
+/dist
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
--- a/README.md
+++ b/README.md
@ -0,0 +1,69 @@
+# essentials
+
+## Project setup
+
+```
+# yarn
+yarn
+
+# npm
+npm install
+
+# pnpm
+pnpm install
+
+# bun
+bun install
+```
+
+### Compiles and hot-reloads for development
+
+```
+# yarn
+yarn dev
+
+# npm
+npm run dev
+
+# pnpm
+pnpm dev
+
+# bun
+bun run dev
+```
+
+### Compiles and minifies for production
+
+```
+# yarn
+yarn build
+
+# npm
+npm run build
+
+# pnpm
+pnpm build
+
+# bun
+bun run build
+```
+
+### Lints and fixes files
+
+```
+# yarn
+yarn lint
+
+# npm
+npm run lint
+
+# pnpm
+pnpm lint
+
+# bun
+bun run lint
+```
+
+### Customize configuration
+
+See [Configuration Reference](https://vitejs.dev/config/).
--- a/index.html
+++ b/index.html
@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>MNS</title>
+  </head>
+
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>
--- a/jsconfig.json
+++ b/jsconfig.json
@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "module": "esnext",
+    "baseUrl": "./",
+    "moduleResolution": "node",
+    "paths": {
+      "@/*": [
+        "src/*"
+      ]
+    },
+    "lib": [
+      "esnext",
+      "dom",
+      "dom.iterable",
+      "scripthost"
+    ]
+  }
+}
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -0,0 +1,34 @@
+{
+  "name": "base",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "lint": "eslint . --fix --ignore-path .gitignore"
+  },
+  "dependencies": {
+    "@mdi/font": "7.0.96",
+    "animate.css": "^4.1.1",
+    "axios": "^1.6.8",
+    "core-js": "^3.29.0",
+    "pinia": "^2.0.0",
+    "roboto-fontface": "*",
+    "swiper": "^11.1.3",
+    "vue": "^3.2.0",
+    "vue-i18n": "^9.13.1",
+    "vue-router": "^4.0.0",
+    "vue3-lottie": "^3.3.0",
+    "vuetify": "^3.0.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^4.0.0",
+    "eslint": "^8.37.0",
+    "eslint-plugin-vue": "^9.3.0",
+    "sass": "^1.60.0",
+    "unplugin-fonts": "^1.0.3",
+    "vite": "^4.2.0",
+    "vite-plugin-vuetify": "^1.0.0"
+  }
+}
--- a/public/1.svg
+++ b/public/1.svg
--- a/public/2.svg
+++ b/public/2.svg
--- a/public/3.svg
+++ b/public/3.svg
--- a/public/4.svg
+++ b/public/4.svg
--- a/public/Home/avatar.png
+++ b/public/Home/avatar.png
--- a/public/Home/slider/1.png
+++ b/public/Home/slider/1.png
--- a/public/Home/slider/2.png
+++ b/public/Home/slider/2.png
--- a/public/Home/slider/3.png
+++ b/public/Home/slider/3.png
--- a/public/Home/slider/4.png
+++ b/public/Home/slider/4.png
--- a/public/team/aTeamMember_1.jpg
+++ b/public/team/aTeamMember_1.jpg
--- a/src/App.vue
+++ b/src/App.vue
@ -0,0 +1,15 @@
+<template>
+  <router-view />
+</template>
+
+<script setup>
+import "animate.css";
+import { register } from "swiper/element/bundle";
+import { onMounted } from "vue";
+import "swiper/element/css/thumbs";
+import "swiper/css/navigation";
+
+onMounted(() => {
+  register();
+});
+</script>
--- a/src/assets/about/about_1.png
+++ b/src/assets/about/about_1.png
--- a/src/assets/about/about_2.png
+++ b/src/assets/about/about_2.png
--- a/src/assets/about/about_3.png
+++ b/src/assets/about/about_3.png
--- a/src/assets/certificates.png
+++ b/src/assets/certificates.png
--- a/src/assets/decorations/decore_1.svg
+++ b/src/assets/decorations/decore_1.svg
@ -0,0 +1,36 @@
+<svg width="206" height="206" viewBox="0 0 206 206" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M84.9849 194.631L86.6283 183.633L88.4323 183.902L87.3067 191.435L91.787 184.404L93.0371 184.591L95.2821 192.627L96.4077 185.094L98.2117 185.364L96.5683 196.362L94.6219 196.071L92.0495 186.87L86.9154 194.919L84.9849 194.631Z" fill="#E9AE0C"/>
+<path d="M73.75 179.972L75.4767 180.56L77.9966 190.19L80.672 182.328L82.3988 182.916L78.8109 193.458L77.0841 192.87L74.5591 183.256L71.8888 191.102L70.162 190.515L73.75 179.972Z" fill="#E9AE0C"/>
+<path d="M66.849 176.442C67.5258 176.757 68.0809 177.157 68.5142 177.641C68.943 178.135 69.2107 178.672 69.3173 179.251C69.424 179.831 69.3421 180.41 69.0718 180.99L67.3025 180.166C67.4665 179.713 67.464 179.276 67.295 178.856C67.1163 178.432 66.7513 178.091 66.2002 177.834C65.6298 177.568 65.122 177.496 64.6768 177.618C64.2271 177.75 63.9008 178.034 63.6981 178.469C63.5404 178.807 63.5135 179.13 63.6174 179.437C63.7117 179.74 63.8816 180.019 64.1273 180.275C64.3632 180.526 64.7107 180.841 65.1698 181.22C65.7461 181.7 66.2016 182.124 66.5362 182.492C66.8567 182.865 67.0741 183.307 67.1885 183.82C67.3028 184.332 67.2135 184.902 66.9207 185.531C66.6503 186.111 66.2688 186.551 65.776 186.851C65.2832 187.151 64.7216 187.295 64.0914 187.284C63.4612 187.272 62.8029 187.107 62.1164 186.787C61.1399 186.332 60.4571 185.714 60.0681 184.932C59.665 184.156 59.6278 183.327 59.9566 182.444L61.7839 183.296C61.6417 183.677 61.6693 184.072 61.8667 184.482C62.0641 184.892 62.4239 185.218 62.946 185.461C63.4197 185.682 63.8628 185.741 64.2752 185.639C64.6875 185.537 64.9996 185.259 65.2113 184.805C65.3555 184.495 65.3831 184.196 65.294 183.908C65.1907 183.624 65.0211 183.357 64.7851 183.106C64.5491 182.855 64.2113 182.544 63.7716 182.174C63.1901 181.68 62.7343 181.244 62.4041 180.866C62.0643 180.485 61.8395 180.033 61.7297 179.511C61.6057 178.994 61.6924 178.417 61.9897 177.778C62.2285 177.266 62.594 176.848 63.0861 176.524C63.5686 176.196 64.1411 176.015 64.8035 175.983C65.4517 175.955 66.1336 176.108 66.849 176.442Z" fill="#E9AE0C"/>
+<path d="M42.7763 173.986L43.6845 172.807L46.0293 174.613L51.9079 166.983L53.3528 168.097L47.4742 175.727L49.8316 177.543L48.9235 178.722L42.7763 173.986Z" fill="#E9AE0C"/>
+<path d="M38.6431 161.147C38.8733 160.91 39.0965 160.71 39.3127 160.549L44.1495 165.237C44.6012 164.694 44.807 164.106 44.7669 163.473C44.7269 162.84 44.4618 162.286 43.9716 161.811C43.2669 161.128 42.4833 160.94 41.6206 161.248L40.2075 159.878C40.9632 159.482 41.7756 159.341 42.6449 159.456C43.4991 159.571 44.2977 159.988 45.0406 160.708C45.6457 161.295 46.0596 161.956 46.2823 162.692C46.4899 163.428 46.494 164.174 46.2946 164.932C46.0801 165.69 45.6574 166.394 45.0263 167.045C44.3953 167.696 43.712 168.14 42.9765 168.378C42.2258 168.616 41.4832 168.639 40.7485 168.447C40.0061 168.247 39.3247 167.847 38.7043 167.245C38.1069 166.666 37.7008 166.02 37.486 165.307C37.2712 164.594 37.2637 163.873 37.4636 163.146C37.656 162.426 38.0492 161.76 38.6431 161.147ZM39.6094 162.886C39.1494 163.376 38.9468 163.93 39.0017 164.548C39.0566 165.165 39.333 165.716 39.8308 166.198C40.2827 166.636 40.8105 166.866 41.4143 166.886C42.0107 166.915 42.5771 166.713 43.1135 166.283L39.6094 162.886Z" fill="#E9AE0C"/>
+<path d="M35.7693 157.963C35.065 158.499 34.3313 158.83 33.5685 158.955C32.7992 159.071 32.0754 158.992 31.3971 158.718C30.7039 158.441 30.1246 157.997 29.6594 157.386C29.2394 156.835 28.9846 156.271 28.8951 155.696C28.7906 155.119 28.806 154.584 28.9411 154.092L27.9227 154.868L26.808 153.404L33.8222 148.063L34.9369 149.527L33.893 150.322C34.4114 150.316 34.9424 150.441 35.4862 150.697C36.0299 150.954 36.5086 151.354 36.9221 151.897C37.3809 152.499 37.6482 153.167 37.7239 153.901C37.7911 154.64 37.662 155.369 37.3366 156.086C36.9961 156.801 36.4737 157.427 35.7693 157.963ZM31.4234 152.202C30.9397 152.571 30.5971 152.992 30.3958 153.467C30.1879 153.934 30.1135 154.4 30.1723 154.864C30.2311 155.329 30.4027 155.748 30.687 156.121C30.9714 156.495 31.3296 156.772 31.7619 156.952C32.1857 157.139 32.6533 157.198 33.1648 157.131C33.6614 157.061 34.1516 156.842 34.6353 156.473C35.119 156.105 35.4691 155.684 35.6854 155.211C35.8952 154.73 35.9749 154.254 35.9246 153.782C35.8593 153.309 35.6877 152.89 35.4099 152.525C35.1255 152.152 34.7672 151.875 34.335 151.695C33.9027 151.514 33.4341 151.462 32.929 151.538C32.409 151.613 31.9071 151.834 31.4234 152.202Z" fill="#E9AE0C"/>
+<path d="M19.7637 139.241C19.4398 138.628 19.2782 138.014 19.2787 137.399C19.2743 136.774 19.4498 136.192 19.8052 135.655C20.1556 135.108 20.6845 134.647 21.3919 134.274L25.9898 131.845L26.8343 133.444L22.4769 135.745C21.7789 136.114 21.3382 136.57 21.1547 137.113C20.9618 137.662 21.0248 138.237 21.3436 138.841C21.6625 139.445 22.1052 139.826 22.6718 139.985C23.224 140.14 23.849 140.033 24.547 139.664L28.9044 137.362L29.7489 138.961L25.3914 141.263C24.6935 141.632 24.2528 142.088 24.0693 142.631C23.8763 143.179 23.9393 143.755 24.2582 144.359C24.577 144.962 25.0197 145.344 25.5863 145.503C26.1385 145.657 26.7636 145.55 27.4615 145.182L31.8189 142.88L32.6709 144.493L24.8756 148.611L24.0237 146.998L24.9149 146.527C24.4548 146.432 24.028 146.229 23.6345 145.918C23.2411 145.608 22.9223 145.221 22.6782 144.759C22.3494 144.136 22.1875 143.51 22.1925 142.88C22.1975 142.25 22.3802 141.671 22.7406 141.143C22.1444 141.156 21.5776 140.985 21.04 140.63C20.493 140.28 20.0676 139.817 19.7637 139.241Z" fill="#E9AE0C"/>
+<path d="M21.635 112.877C21.7414 113.616 21.7105 114.299 21.5423 114.927C21.3635 115.556 21.0609 116.074 20.6345 116.48C20.208 116.887 19.6781 117.135 19.0446 117.227L18.7663 115.294C19.2353 115.184 19.5994 114.943 19.8584 114.571C20.1159 114.189 20.2013 113.698 20.1147 113.096C20.0249 112.473 19.8072 112.009 19.4614 111.703C19.105 111.398 18.6893 111.28 18.2142 111.349C17.8447 111.402 17.5598 111.556 17.3594 111.811C17.1576 112.056 17.0169 112.351 16.9373 112.697C16.8562 113.032 16.7829 113.495 16.7172 114.086C16.6305 114.832 16.5249 115.445 16.4002 115.926C16.2635 116.399 16.0121 116.823 15.6459 117.199C15.2798 117.575 14.7536 117.812 14.0674 117.911C13.4339 118.002 12.8568 117.924 12.3361 117.675C11.8154 117.427 11.3873 117.036 11.0518 116.503C10.7163 115.969 10.4945 115.327 10.3866 114.578C10.233 113.511 10.3768 112.602 10.8179 111.848C11.2469 111.086 11.9207 110.601 12.8391 110.393L13.1265 112.389C12.7299 112.478 12.4141 112.718 12.1792 113.107C11.9444 113.497 11.868 113.976 11.9501 114.547C12.0246 115.064 12.2174 115.467 12.5285 115.756C12.8396 116.046 13.2432 116.155 13.7394 116.083C14.0773 116.035 14.3426 115.894 14.5354 115.661C14.7162 115.42 14.8471 115.132 14.9281 114.797C15.0092 114.462 15.0841 114.009 15.1529 113.439C15.2485 112.681 15.364 112.061 15.4992 111.578C15.6329 111.085 15.8881 110.649 16.2648 110.272C16.6294 109.885 17.1601 109.642 17.8569 109.541C18.4164 109.461 18.9664 109.538 19.5067 109.773C20.0455 109.997 20.5098 110.377 20.8996 110.914C21.2773 111.441 21.5224 112.096 21.635 112.877Z" fill="#E9AE0C"/>
+<path d="M10.9733 103.881C10.9973 104.211 10.9057 104.495 10.6985 104.735C10.4914 104.975 10.2229 105.107 9.8931 105.131C9.5633 105.155 9.27857 105.063 9.03891 104.856C8.79925 104.649 8.66742 104.38 8.64342 104.05C8.6202 103.731 8.71217 103.452 8.91933 103.212C9.12648 102.973 9.39496 102.841 9.72475 102.817C10.0545 102.793 10.3393 102.884 10.5789 103.091C10.8186 103.299 10.95 103.562 10.9733 103.881ZM12.0732 102.903L20.8659 102.263L20.9983 104.082L12.2055 104.722L12.0732 102.903Z" fill="#E9AE0C"/>
+<path d="M11.8417 92.1417C11.8893 91.45 12.0754 90.8427 12.4 90.3197C12.7254 89.7861 13.1807 89.3844 13.7659 89.1146C14.3511 88.8448 15.0428 88.7373 15.8409 88.7922L21.0287 89.1489L20.9046 90.9526L15.9882 90.6146C15.2008 90.5604 14.586 90.7159 14.1439 91.0811C13.6912 91.4456 13.4414 91.9684 13.3945 92.6494C13.3477 93.3305 13.5232 93.8878 13.9211 94.3215C14.309 94.7438 14.8967 94.982 15.6842 95.0361L20.6006 95.3742L20.4755 97.1939L11.6802 96.5891L11.8054 94.7694L12.811 94.8386C12.4697 94.5157 12.2136 94.1185 12.0429 93.6471C11.8729 93.1649 11.8059 92.6631 11.8417 92.1417Z" fill="#E9AE0C"/>
+<path d="M17.3907 84.8774C16.5026 84.6947 15.7607 84.3571 15.1651 83.8643C14.5612 83.359 14.1419 82.7501 13.9073 82.0375C13.6726 81.325 13.6402 80.5561 13.8099 79.7307C14.0247 78.6858 14.4527 77.8754 15.0939 77.2994C15.7268 76.7108 16.5276 76.3909 17.4965 76.3397L17.1001 78.2674C16.6395 78.336 16.2536 78.518 15.9424 78.8134C15.6312 79.1087 15.4218 79.5176 15.3144 80.04C15.164 80.7714 15.3049 81.4102 15.7371 81.9564C16.161 82.4901 16.8378 82.8525 17.7677 83.0437C18.6976 83.2349 19.4678 83.1701 20.0783 82.8491C20.6909 82.5177 21.0724 81.9863 21.2228 81.255C21.4355 80.2206 21.1217 79.4428 20.2815 78.9216L20.6779 76.9939C21.504 77.4251 22.1073 78.0392 22.4879 78.8362C22.8581 79.6311 22.9379 80.5404 22.7273 81.5643C22.5576 82.3897 22.2244 83.0835 21.7276 83.6456C21.2205 84.2056 20.5949 84.5997 19.8511 84.8279C19.0989 85.0435 18.2788 85.06 17.3907 84.8774Z" fill="#E9AE0C"/>
+<path d="M23.4287 64.9673C23.7391 65.0812 24.0122 65.2041 24.2478 65.336L21.9277 71.6598C22.607 71.8522 23.2277 71.8016 23.79 71.508C24.3522 71.2143 24.7508 70.747 24.986 70.1061C25.324 69.1849 25.1773 68.3925 24.5458 67.7291L25.2236 65.8815C25.8929 66.4111 26.3516 67.0963 26.5998 67.9373C26.8416 68.7645 26.7844 69.6638 26.428 70.6352C26.1377 71.4263 25.7017 72.073 25.1197 72.5753C24.5314 73.0639 23.8507 73.3709 23.0775 73.4962C22.298 73.6079 21.4827 73.5076 20.6315 73.1953C19.7803 72.883 19.0967 72.4391 18.5808 71.8635C18.0584 71.2742 17.7359 70.6048 17.6132 69.8553C17.4942 69.0959 17.5835 68.3106 17.8811 67.4994C18.1676 66.7183 18.5932 66.0848 19.1578 65.5989C19.7224 65.113 20.3776 64.8137 21.1234 64.701C21.8591 64.5846 22.6276 64.6734 23.4287 64.9673ZM22.2321 66.5564C21.5976 66.335 21.0092 66.3747 20.467 66.6757C19.9248 66.9767 19.5343 67.4527 19.2955 68.1036C19.0788 68.6944 19.0835 69.2699 19.3097 69.8301C19.5259 70.3867 19.9398 70.8225 20.5513 71.1378L22.2321 66.5564Z" fill="#E9AE0C"/>
+<path d="M25.879 48.2202L24.5227 47.2561L26.4509 44.5436L35.9577 51.3016L34.8916 52.8013L26.7411 47.0074L25.879 48.2202Z" fill="#E9AE0C"/>
+<path d="M37.6849 44.25C38.1702 44.4956 38.6306 44.5657 39.0661 44.4603C39.5017 44.3548 39.904 44.0673 40.273 43.5976C40.7409 43.0021 40.8487 42.3814 40.5965 41.7356C40.3443 41.0897 39.652 40.322 38.5197 39.4323C38.6467 39.8577 38.6449 40.3175 38.5143 40.8118C38.3819 41.291 38.1477 41.7446 37.8116 42.1723C37.3832 42.7175 36.8854 43.1267 36.3181 43.3999C35.7423 43.6665 35.1342 43.7585 34.4938 43.6758C33.8516 43.5781 33.2159 43.2822 32.5869 42.7879C31.6642 42.063 31.1412 41.218 31.0178 40.2528C30.8926 39.2727 31.2023 38.3088 31.947 37.361C32.8432 36.2203 33.8608 35.7108 34.9997 35.8324C36.1368 35.939 37.4896 36.6085 39.058 37.8408C40.14 38.6909 40.9524 39.4785 41.4952 40.2034C42.0445 40.9199 42.3207 41.6388 42.3237 42.3601C42.3267 43.0814 42.0185 43.8363 41.399 44.6247C40.6939 45.5222 39.9154 46.0296 39.0634 46.147C38.2115 46.2645 37.406 46.0725 36.647 45.571L37.6849 44.25ZM36.8015 40.9717C37.1969 40.4685 37.3515 39.9524 37.2652 39.4234C37.1771 38.8794 36.8731 38.4031 36.3531 37.9945C35.7743 37.5398 35.2037 37.3424 34.6411 37.4023C34.0768 37.4472 33.587 37.7339 33.1719 38.2623C32.7567 38.7907 32.5949 39.3419 32.6866 39.9158C32.7765 40.4748 33.0898 40.9652 33.6266 41.3869C34.1382 41.7889 34.6771 41.9749 35.2433 41.945C35.8076 41.9 36.327 41.5756 36.8015 40.9717Z" fill="#E9AE0C"/>
+<path d="M43.6514 33.6089C42.4527 33.9274 41.458 33.6389 40.6672 32.7434C40.2859 32.3117 40.0444 31.8206 39.9425 31.2702C39.8407 30.7197 39.9139 30.15 40.1621 29.5608C40.4032 28.9637 40.8356 28.3897 41.4592 27.839C42.0749 27.2954 42.6939 26.9408 43.3163 26.7755C43.9396 26.595 44.5181 26.5894 45.0517 26.7586C45.5853 26.9277 46.0427 27.2282 46.424 27.6599C46.8193 28.1077 47.0529 28.6058 47.1246 29.1544C47.1973 29.6879 47.1269 30.2125 46.9135 30.7283C47.5175 30.4937 48.1209 30.4518 48.7237 30.6026C49.3194 30.7454 49.8431 31.0727 50.295 31.5844C50.7539 32.1041 51.028 32.6803 51.1172 33.3131C51.2063 33.9459 51.1104 34.5785 50.8293 35.2109C50.5482 35.8434 50.1078 36.4244 49.5081 36.9539C48.9084 37.4834 48.2774 37.8485 47.6151 38.0492C46.9607 38.2429 46.3251 38.2563 45.7082 38.0895C45.0913 37.9227 44.5534 37.5795 44.0945 37.0598C43.6356 36.5401 43.3721 35.9758 43.3041 35.367C43.2361 34.7582 43.3519 34.1722 43.6514 33.6089ZM45.265 28.9822C44.8696 28.5345 44.4261 28.3142 43.9344 28.3215C43.4427 28.3287 42.9531 28.5477 42.4653 28.9784C41.9856 29.402 41.7117 29.8573 41.6437 30.3443C41.5757 30.8313 41.7429 31.3026 42.1453 31.7584C42.4983 32.1582 42.9317 32.3589 43.4455 32.3606C43.9602 32.3472 44.4454 32.1393 44.9012 31.7368C45.3569 31.3344 45.6197 30.8746 45.6896 30.3575C45.7595 29.8404 45.618 29.382 45.265 28.9822ZM45.812 32.7682C45.2843 33.2342 44.969 33.7474 44.8662 34.3078C44.7643 34.8532 44.9287 35.3697 45.3594 35.8574C45.7618 36.3132 46.2501 36.5437 46.8241 36.5492C47.391 36.5466 47.9503 36.3017 48.502 35.8145C49.0457 35.3344 49.3464 34.8128 49.404 34.2496C49.4697 33.6793 49.3048 33.1703 48.9094 32.7226C48.4858 32.2428 47.9936 32.0158 47.4328 32.0414C46.8799 32.06 46.3397 32.3023 45.812 32.7682Z" fill="#E9AE0C"/>
+<path d="M55.7568 27.6202C56.1857 27.9546 56.624 28.112 57.0717 28.0923C57.5194 28.0727 57.9695 27.8679 58.422 27.478C58.9958 26.9836 59.2211 26.3953 59.0978 25.713C58.9746 25.0307 58.443 24.1441 57.5031 23.0532C57.5459 23.495 57.4556 23.9459 57.2324 24.4058C57.0102 24.8506 56.6931 25.2506 56.2809 25.6057C55.7557 26.0583 55.1884 26.364 54.5791 26.5229C53.9628 26.6737 53.3484 26.6469 52.7358 26.4426C52.1244 26.2231 51.5576 25.8104 51.0354 25.2043C50.2695 24.3154 49.9189 23.3855 49.9835 22.4147C50.0492 21.4288 50.5387 20.5424 51.4518 19.7557C52.5509 18.8088 53.6475 18.5046 54.7417 18.8431C55.837 19.1666 57.0356 20.0839 58.3376 21.595C59.2358 22.6375 59.8814 23.5666 60.2745 24.3824C60.6758 25.1913 60.8084 25.9499 60.6726 26.6583C60.5367 27.3667 60.089 28.0482 59.3293 28.7026C58.4647 29.4476 57.603 29.7957 56.7445 29.747C55.8859 29.6983 55.1324 29.3549 54.484 28.7167L55.7568 27.6202ZM55.5208 24.2332C56.0056 23.8154 56.2566 23.3387 56.2738 22.803C56.292 22.2522 56.0853 21.7263 55.6537 21.2253C55.1732 20.6677 54.6513 20.3642 54.0877 20.3147C53.5252 20.2502 52.9895 20.4373 52.4804 20.8759C51.9713 21.3145 51.7065 21.8243 51.686 22.4051C51.6666 22.9709 51.8797 23.5124 52.3253 24.0296C52.75 24.5225 53.243 24.8088 53.8043 24.8883C54.3668 24.9528 54.9389 24.7345 55.5208 24.2332Z" fill="#E9AE0C"/>
+<path d="M83.9319 9.78662L84.4383 11.2367L78.23 13.4048L77.7236 11.9547L83.9319 9.78662Z" fill="#E9AE0C"/>
+<path d="M123.027 5.63336L121.656 16.6685L119.846 16.4435L120.785 8.88564L116.48 16.0251L115.225 15.8692L112.783 7.89106L111.843 15.4489L110.033 15.224L111.405 4.18885L113.358 4.43158L116.156 13.5665L121.09 5.39261L123.027 5.63336Z" fill="#E9AE0C"/>
+<path d="M134.696 20.6752L132.96 20.1141L130.293 10.5245L127.738 18.4258L126.003 17.8647L129.428 7.26875L131.164 7.82985L133.836 17.4042L136.386 9.51809L138.121 10.0792L134.696 20.6752Z" fill="#E9AE0C"/>
+<path d="M141.653 23.5236C140.971 23.2202 140.409 22.8301 139.967 22.3535C139.529 21.8671 139.252 21.3352 139.136 20.7579C139.019 20.1806 139.09 19.5996 139.351 19.0148L141.134 19.8081C140.978 20.264 140.988 20.7005 141.165 21.1175C141.351 21.5389 141.722 21.8731 142.277 22.1202C142.852 22.376 143.361 22.4389 143.804 22.3091C144.251 22.1695 144.573 21.8804 144.768 21.4418C144.919 21.1007 144.941 20.7774 144.831 20.472C144.732 20.1709 144.557 19.8947 144.307 19.6433C144.066 19.3963 143.714 19.0876 143.248 18.717C142.663 18.2468 142.2 17.8308 141.859 17.469C141.532 17.1017 141.307 16.663 141.184 16.1529C141.061 15.6428 141.14 15.0709 141.422 14.4374C141.682 13.8527 142.055 13.406 142.543 13.0975C143.03 12.789 143.589 12.6348 144.22 12.635C144.85 12.6352 145.511 12.7891 146.203 13.0969C147.187 13.5347 147.881 14.1409 148.283 14.9154C148.7 15.6845 148.752 16.513 148.439 17.401L146.597 16.5817C146.732 16.1983 146.698 15.8036 146.493 15.3974C146.289 14.9912 145.923 14.671 145.397 14.4369C144.919 14.2245 144.475 14.173 144.065 14.2822C143.654 14.3915 143.347 14.6752 143.143 15.1332C143.005 15.4451 142.982 15.7446 143.076 16.0316C143.185 16.3132 143.359 16.5775 143.599 16.8245C143.84 17.0715 144.183 17.376 144.629 17.7378C145.219 18.2221 145.683 18.65 146.019 19.0216C146.366 19.3975 146.599 19.8454 146.717 20.3653C146.851 20.8798 146.774 21.4587 146.488 22.1019C146.258 22.6184 145.9 23.0429 145.414 23.3752C144.937 23.7119 144.368 23.9024 143.706 23.9466C143.059 23.9854 142.374 23.8444 141.653 23.5236Z" fill="#E9AE0C"/>
+<path d="M170.908 29.8788L169.892 30.9662L167.729 28.9454L161.154 35.9838L159.821 34.7386L166.397 27.7003L164.222 25.6686L165.238 24.5813L170.908 29.8788Z" fill="#E9AE0C"/>
+<path d="M174.457 43.518C174.189 43.7116 173.935 43.8692 173.693 43.9907L169.75 38.5298C169.21 38.9852 168.905 39.5281 168.834 40.1584C168.763 40.7887 168.927 41.3805 169.327 41.934C169.901 42.7295 170.64 43.0512 171.543 42.8989L172.695 44.4944C171.882 44.7528 171.058 44.7497 170.222 44.4849C169.401 44.2226 168.687 43.672 168.081 42.8332C167.588 42.1501 167.296 41.4268 167.205 40.6635C167.129 39.9025 167.256 39.1665 167.584 38.4555C167.928 37.747 168.467 37.1273 169.202 36.5964C169.937 36.0656 170.688 35.7474 171.453 35.6417C172.234 35.5385 172.969 35.6456 173.659 35.9632C174.355 36.2894 174.956 36.8027 175.462 37.5032C175.949 38.1777 176.236 38.8848 176.323 39.6247C176.41 40.3645 176.292 41.075 175.968 41.7562C175.653 42.4311 175.149 43.0184 174.457 43.518ZM173.81 41.6372C174.348 41.2351 174.644 40.7252 174.698 40.1074C174.752 39.4896 174.576 38.8997 174.17 38.3376C173.802 37.8274 173.322 37.5093 172.731 37.3835C172.149 37.2513 171.556 37.3505 170.953 37.681L173.81 41.6372Z" fill="#E9AE0C"/>
+<path d="M177.619 47.1964C178.354 46.703 179.106 46.4166 179.875 46.3373C180.649 46.2668 181.367 46.3889 182.028 46.7033C182.704 47.0207 183.255 47.4983 183.683 48.136C184.07 48.7116 184.29 49.2893 184.345 49.869C184.415 50.4516 184.368 50.9843 184.204 51.467L185.267 50.7536L186.292 52.2814L178.972 57.1946L177.947 55.6668L179.036 54.9356C178.518 54.9106 177.996 54.754 177.468 54.4657C176.941 54.1774 176.487 53.7499 176.106 53.183C175.684 52.5542 175.457 51.8715 175.425 51.135C175.402 50.3925 175.575 49.6731 175.942 48.9767C176.325 48.2832 176.883 47.6898 177.619 47.1964ZM181.613 53.2058C182.118 52.8669 182.485 52.4664 182.715 52.0042C182.95 51.5508 183.052 51.0904 183.021 50.6231C182.99 50.1558 182.844 49.7273 182.582 49.3376C182.32 48.9479 181.979 48.6501 181.559 48.4444C181.147 48.2326 180.683 48.1453 180.169 48.1824C179.669 48.2225 179.167 48.4119 178.662 48.7507C178.157 49.0896 177.782 49.4886 177.538 49.948C177.3 50.4161 177.192 50.8869 177.214 51.3601C177.251 51.8363 177.398 52.2648 177.653 52.6457C177.915 53.0354 178.256 53.3331 178.677 53.5389C179.098 53.7447 179.562 53.8246 180.071 53.7786C180.594 53.7355 181.109 53.5446 181.613 53.2058Z" fill="#E9AE0C"/>
+<path d="M192.888 67.1621C193.152 67.8034 193.254 68.4304 193.194 69.043C193.139 69.6655 192.908 70.2273 192.503 70.7283C192.101 71.2392 191.531 71.6466 190.791 71.9507L185.981 73.9272L185.294 72.2549L189.852 70.3818C190.582 70.0817 191.065 69.6702 191.299 69.147C191.544 68.6198 191.537 68.0405 191.277 67.409C191.018 66.7776 190.614 66.3555 190.065 66.1428C189.53 65.9358 188.898 65.9824 188.168 66.2824L183.609 68.1555L182.922 66.4832L187.48 64.6101C188.21 64.3101 188.693 63.8985 188.928 63.3753C189.172 62.8481 189.165 62.2688 188.905 61.6373C188.646 61.0059 188.242 60.5838 187.693 60.3711C187.158 60.1641 186.526 60.2107 185.796 60.5107L181.238 62.3838L180.544 60.6967L188.699 57.3458L189.392 59.0329L188.46 59.416C188.909 59.5545 189.314 59.7973 189.676 60.1445C190.038 60.4917 190.318 60.907 190.516 61.3905C190.784 62.0416 190.885 62.6805 190.82 63.307C190.754 63.9336 190.517 64.4924 190.107 64.9836C190.702 65.0275 191.25 65.2521 191.751 65.6575C192.262 66.0587 192.641 66.5603 192.888 67.1621Z" fill="#E9AE0C"/>
+<path d="M190.594 90.595C190.479 89.8572 190.502 89.1735 190.663 88.5439C190.835 87.9127 191.132 87.3916 191.554 86.9805C191.976 86.5695 192.503 86.3148 193.135 86.2164L193.435 88.1452C192.967 88.2612 192.606 88.5063 192.351 88.8805C192.098 89.2654 192.018 89.7582 192.112 90.3589C192.208 90.9808 192.431 91.4427 192.78 91.7446C193.14 92.0449 193.557 92.1581 194.032 92.0844C194.4 92.027 194.684 91.8696 194.881 91.6122C195.08 91.3653 195.218 91.0687 195.293 90.7223C195.37 90.3864 195.439 89.9224 195.498 89.3303C195.576 88.5841 195.675 87.9696 195.794 87.4869C195.925 87.0131 196.172 86.5861 196.534 86.206C196.896 85.8259 197.419 85.5825 198.104 85.476C198.737 85.3776 199.315 85.4497 199.838 85.6921C200.362 85.9345 200.794 86.3207 201.136 86.8505C201.477 87.3803 201.706 88.0194 201.822 88.7677C201.988 89.8322 201.854 90.7436 201.422 91.5017C201.001 92.2688 200.333 92.7613 199.417 92.9794L199.107 90.9873C199.503 90.8934 199.816 90.6504 200.046 90.2583C200.277 89.8663 200.348 89.3856 200.259 88.8165C200.179 88.3 199.982 87.8989 199.667 87.6132C199.353 87.3274 198.948 87.2231 198.453 87.3001C198.116 87.3525 197.852 87.4961 197.662 87.7308C197.484 87.9744 197.356 88.2641 197.279 88.6C197.201 88.9358 197.132 89.3893 197.069 89.9603C196.982 90.7187 196.874 91.3401 196.744 91.8245C196.616 92.3194 196.365 92.7577 195.993 93.1395C195.633 93.5301 195.105 93.7796 194.409 93.8878C193.851 93.9746 193.3 93.9038 192.757 93.6752C192.216 93.4571 191.747 93.082 191.351 92.5498C190.968 92.0265 190.715 91.3749 190.594 90.595Z" fill="#E9AE0C"/>
+<path d="M201.096 98.6854C201.084 98.3549 201.186 98.0737 201.401 97.8416C201.617 97.6095 201.89 97.4874 202.22 97.4752C202.551 97.4631 202.832 97.5648 203.064 97.7804C203.296 97.996 203.418 98.2691 203.43 98.5995C203.442 98.9193 203.34 99.1952 203.125 99.4273C202.909 99.6594 202.636 99.7815 202.306 99.7937C201.975 99.8058 201.694 99.7041 201.462 99.4885C201.23 99.2729 201.108 99.0052 201.096 98.6854ZM199.962 99.6237L191.152 99.9478L191.085 98.125L199.895 97.8009L199.962 99.6237Z" fill="#E9AE0C"/>
+<path d="M199.312 108.192C199.313 108.886 199.171 109.505 198.884 110.049C198.597 110.605 198.171 111.038 197.606 111.348C197.042 111.659 196.359 111.815 195.559 111.816L190.359 111.827L190.356 110.019L195.284 110.009C196.073 110.007 196.675 109.809 197.09 109.413C197.516 109.018 197.728 108.479 197.727 107.796C197.726 107.113 197.511 106.57 197.084 106.165C196.667 105.771 196.064 105.575 195.274 105.577L190.346 105.587L190.342 103.763L199.158 103.745L199.162 105.569L198.154 105.571C198.518 105.869 198.801 106.247 199.005 106.705C199.208 107.174 199.311 107.67 199.312 108.192Z" fill="#E9AE0C"/>
+<path d="M194.527 114.533C195.426 114.652 196.19 114.936 196.819 115.385C197.457 115.846 197.919 116.423 198.204 117.117C198.489 117.811 198.576 118.576 198.466 119.411C198.326 120.469 197.957 121.308 197.358 121.928C196.769 122.56 195.993 122.936 195.03 123.057L195.288 121.106C195.743 121.004 196.115 120.795 196.404 120.478C196.693 120.162 196.873 119.739 196.943 119.21C197.041 118.47 196.855 117.843 196.385 117.329C195.924 116.827 195.223 116.513 194.282 116.389C193.34 116.265 192.577 116.384 191.991 116.748C191.403 117.122 191.061 117.679 190.963 118.42C190.824 119.467 191.193 120.22 192.068 120.68L191.81 122.631C190.956 122.26 190.31 121.69 189.873 120.922C189.448 120.156 189.303 119.255 189.44 118.218C189.55 117.383 189.833 116.667 190.289 116.071C190.755 115.476 191.351 115.039 192.076 114.758C192.811 114.489 193.628 114.414 194.527 114.533Z" fill="#E9AE0C"/>
+<path d="M190.62 134.17C190.298 134.091 190.013 134 189.764 133.895L191.363 127.351C190.666 127.236 190.055 127.356 189.529 127.711C189.003 128.065 188.659 128.574 188.497 129.237C188.264 130.191 188.499 130.962 189.201 131.55L188.734 133.462C188.009 133.011 187.477 132.381 187.136 131.573C186.803 130.778 186.76 129.878 187.005 128.873C187.205 128.054 187.566 127.363 188.088 126.799C188.618 126.247 189.26 125.866 190.014 125.655C190.777 125.457 191.598 125.465 192.479 125.68C193.36 125.896 194.089 126.26 194.666 126.774C195.251 127.302 195.646 127.931 195.852 128.662C196.055 129.403 196.054 130.194 195.849 131.033C195.652 131.841 195.3 132.518 194.793 133.064C194.286 133.61 193.669 133.981 192.94 134.176C192.222 134.374 191.449 134.372 190.62 134.17ZM191.631 132.457C192.286 132.606 192.866 132.5 193.372 132.141C193.877 131.781 194.212 131.264 194.376 130.591C194.525 129.979 194.456 129.408 194.169 128.877C193.892 128.348 193.432 127.961 192.789 127.716L191.631 132.457Z" fill="#E9AE0C"/>
+<path d="M188.85 148.024L190.269 148.892L188.534 151.731L178.582 145.647L179.542 144.077L188.074 149.293L188.85 148.024Z" fill="#E9AE0C"/>
+<path d="M177.535 152.566C177.039 152.343 176.576 152.293 176.146 152.418C175.716 152.543 175.326 152.848 174.979 153.334C174.538 153.949 174.458 154.574 174.739 155.208C175.019 155.842 175.745 156.578 176.916 157.416C176.77 156.997 176.752 156.538 176.86 156.038C176.971 155.553 177.185 155.09 177.501 154.648C177.905 154.084 178.384 153.653 178.939 153.355C179.502 153.063 180.105 152.944 180.749 152.998C181.395 153.066 182.043 153.334 182.693 153.799C183.647 154.482 184.208 155.303 184.374 156.262C184.543 157.236 184.276 158.212 183.575 159.192C182.73 160.372 181.737 160.926 180.593 160.856C179.453 160.8 178.071 160.192 176.449 159.03C175.331 158.229 174.484 157.479 173.909 156.779C173.328 156.088 173.02 155.382 172.985 154.661C172.95 153.941 173.224 153.173 173.808 152.358C174.472 151.43 175.228 150.888 176.073 150.733C176.919 150.577 177.732 150.733 178.513 151.2L177.535 152.566ZM178.564 155.802C178.191 156.322 178.06 156.845 178.17 157.369C178.282 157.909 178.607 158.371 179.145 158.756C179.743 159.185 180.322 159.356 180.881 159.271C181.443 159.201 181.92 158.893 182.311 158.347C182.702 157.8 182.839 157.242 182.722 156.673C182.607 156.119 182.272 155.643 181.717 155.245C181.188 154.867 180.641 154.705 180.077 154.76C179.515 154.83 179.011 155.177 178.564 155.802Z" fill="#E9AE0C"/>
+<path d="M172.2 163.213C173.337 162.718 174.364 162.854 175.28 163.62C175.722 163.99 176.034 164.439 176.218 164.968C176.401 165.497 176.414 166.072 176.257 166.691C176.108 167.318 175.767 167.95 175.233 168.588C174.706 169.218 174.147 169.661 173.556 169.918C172.967 170.19 172.396 170.283 171.843 170.195C171.29 170.108 170.793 169.88 170.351 169.51C169.893 169.127 169.587 168.669 169.434 168.138C169.282 167.621 169.273 167.092 169.407 166.55C168.845 166.873 168.255 167.005 167.636 166.946C167.026 166.894 166.459 166.649 165.935 166.211C165.403 165.766 165.046 165.237 164.863 164.625C164.68 164.013 164.68 163.373 164.863 162.706C165.046 162.038 165.394 161.398 165.907 160.784C166.421 160.171 166.99 159.715 167.615 159.417C168.233 159.128 168.859 159.019 169.494 159.091C170.129 159.164 170.712 159.422 171.244 159.867C171.776 160.312 172.121 160.831 172.279 161.422C172.438 162.014 172.411 162.611 172.2 163.213ZM171.299 168.029C171.757 168.412 172.228 168.564 172.713 168.483C173.198 168.402 173.65 168.112 174.067 167.613C174.478 167.122 174.68 166.631 174.675 166.139C174.669 165.647 174.433 165.206 173.966 164.816C173.557 164.474 173.099 164.34 172.591 164.416C172.084 164.506 171.635 164.785 171.245 165.251C170.855 165.717 170.664 166.211 170.672 166.733C170.681 167.255 170.89 167.687 171.299 168.029ZM170.19 164.368C170.642 163.828 170.876 163.273 170.894 162.704C170.913 162.149 170.673 161.663 170.174 161.246C169.707 160.856 169.19 160.701 168.622 160.782C168.062 160.869 167.545 161.195 167.073 161.76C166.608 162.316 166.389 162.877 166.416 163.442C166.437 164.016 166.676 164.494 167.134 164.878C167.625 165.289 168.146 165.439 168.696 165.33C169.24 165.228 169.738 164.908 170.19 164.368Z" fill="#E9AE0C"/>
+<path d="M162.041 169.138C161.604 168.814 161.162 168.667 160.715 168.697C160.268 168.727 159.823 168.942 159.379 169.342C158.817 169.85 158.606 170.443 158.745 171.123C158.884 171.802 159.436 172.676 160.401 173.745C160.348 173.304 160.428 172.851 160.64 172.386C160.852 171.936 161.16 171.529 161.564 171.164C162.078 170.7 162.638 170.381 163.244 170.208C163.856 170.043 164.471 170.055 165.088 170.245C165.705 170.45 166.281 170.85 166.817 171.443C167.603 172.314 167.976 173.236 167.934 174.208C167.891 175.195 167.422 176.092 166.528 176.9C165.451 177.872 164.362 178.202 163.26 177.889C162.157 177.591 160.938 176.702 159.601 175.222C158.679 174.201 158.012 173.287 157.6 172.48C157.18 171.681 157.029 170.926 157.149 170.214C157.268 169.503 157.7 168.811 158.444 168.139C159.291 167.374 160.144 167.006 161.004 167.035C161.863 167.064 162.624 167.389 163.288 168.012L162.041 169.138ZM162.356 172.519C161.881 172.948 161.641 173.43 161.636 173.966C161.631 174.517 161.85 175.038 162.293 175.529C162.786 176.075 163.315 176.366 163.88 176.403C164.443 176.454 164.975 176.255 165.473 175.804C165.972 175.354 166.225 174.838 166.232 174.257C166.238 173.691 166.012 173.154 165.555 172.648C165.119 172.165 164.619 171.89 164.056 171.824C163.492 171.772 162.926 172.004 162.356 172.519Z" fill="#E9AE0C"/>
+<path d="M125.879 190.402L125.413 188.938L131.68 186.945L132.145 188.408L125.879 190.402Z" fill="#E9AE0C"/>
+</svg>
--- a/src/assets/decorations/gear.svg
+++ b/src/assets/decorations/gear.svg
--- a/src/assets/decorations/test_1.svg
+++ b/src/assets/decorations/test_1.svg
@ -0,0 +1,6 @@
+<svg width="363" height="325" viewBox="0 0 363 325" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M300.962 117.358C300.466 116.073 301.101 114.628 302.382 114.13C303.652 113.632 305.091 114.27 305.587 115.555C306.083 116.83 305.448 118.274 304.178 118.772C303.88 118.892 303.573 118.951 303.275 118.951C302.282 118.951 301.339 118.344 300.962 117.358ZM294.055 102.346C293.4 101.131 293.846 99.6271 295.057 98.9697C296.258 98.3222 297.767 98.7705 298.412 99.9757V99.9857C299.067 101.191 298.62 102.695 297.409 103.353C297.032 103.562 296.635 103.651 296.238 103.651C295.355 103.651 294.501 103.183 294.055 102.346ZM59.1885 96.7982C58.0174 96.081 57.6501 94.547 58.3647 93.3716C59.0793 92.2062 60.6077 91.8376 61.7788 92.5548C62.9499 93.272 63.3171 94.806 62.5926 95.9814C62.1262 96.7484 61.3123 97.1667 60.4787 97.1667C60.0321 97.1667 59.5854 97.0472 59.1885 96.7982ZM285.341 88.3015C284.547 87.1858 284.815 85.6319 285.927 84.8351C287.048 84.0382 288.596 84.2972 289.39 85.4228C290.184 86.5384 289.926 88.0923 288.805 88.8892C288.368 89.198 287.862 89.3474 287.366 89.3474C286.591 89.3474 285.827 88.9888 285.341 88.3015ZM68.5672 82.8329C67.4954 81.9763 67.3167 80.4124 68.1702 79.3366C69.0238 78.2608 70.5819 78.0815 71.6538 78.9382C72.7257 79.7948 72.9043 81.3587 72.0508 82.4345C72.0508 82.4345 72.0508 82.4345 72.0508 82.4444C71.5645 83.062 70.84 83.3808 70.1056 83.3808C69.5696 83.3808 69.0238 83.2015 68.5672 82.8329ZM274.99 75.4419C274.067 74.4258 274.136 72.852 275.148 71.9256C276.151 70.9993 277.719 71.069 278.652 72.085C279.575 73.0911 279.505 74.6749 278.493 75.6012C278.017 76.0395 277.421 76.2487 276.816 76.2487C276.151 76.2487 275.476 75.9798 274.99 75.4419ZM79.5836 70.1327C78.6209 69.1465 78.6407 67.5727 79.6233 66.6065C80.5959 65.6403 82.1739 65.6602 83.1267 66.6463C84.0894 67.6225 84.0695 69.2063 83.087 70.1625C82.6106 70.6407 81.9853 70.8797 81.3601 70.8797C80.715 70.8797 80.0699 70.6307 79.5836 70.1327ZM263.14 63.9569C262.097 63.0604 261.978 61.4865 262.872 60.4406C263.755 59.4047 265.323 59.2752 266.365 60.1717C267.407 61.0582 267.526 62.6321 266.643 63.678C266.147 64.2557 265.452 64.5545 264.747 64.5545C264.182 64.5545 263.606 64.3553 263.14 63.9569ZM92.0688 58.8768C91.2351 57.7811 91.4435 56.2172 92.5352 55.3805C93.617 54.5437 95.1752 54.7529 96.0088 55.8486C96.8425 56.9443 96.6341 58.5082 95.5424 59.3449C95.0958 59.6836 94.5698 59.8529 94.0438 59.8529C93.2994 59.8529 92.5551 59.5143 92.0688 58.8768ZM249.989 54.0158C248.838 53.2588 248.531 51.7148 249.285 50.5594C250.039 49.4138 251.577 49.1051 252.719 49.8621C253.86 50.6191 254.178 52.1631 253.423 53.3086C252.947 54.0357 252.153 54.4242 251.349 54.4242C250.883 54.4242 250.406 54.2947 249.989 54.0158ZM105.834 49.2445C105.139 48.0492 105.536 46.5252 106.727 45.8279V45.8379C107.908 45.1406 109.427 45.539 110.122 46.7244C110.806 47.9097 110.409 49.4338 109.228 50.131C108.841 50.3601 108.405 50.4697 107.978 50.4697C107.124 50.4697 106.301 50.0314 105.834 49.2445ZM235.718 45.7781C234.487 45.1605 233.991 43.6664 234.596 42.4312C235.202 41.206 236.69 40.698 237.921 41.3156C239.152 41.9232 239.648 43.4173 239.043 44.6525C238.606 45.5291 237.733 46.0371 236.819 46.0371C236.442 46.0371 236.065 45.9474 235.718 45.7781ZM120.681 41.3753C120.136 40.1103 120.721 38.646 121.982 38.1081C123.242 37.5702 124.701 38.148 125.247 39.413C125.783 40.6781 125.197 42.1423 123.937 42.6902C123.619 42.8197 123.292 42.8894 122.964 42.8894C122.001 42.8894 121.088 42.3216 120.681 41.3753ZM220.553 39.3632C219.253 38.915 218.568 37.4906 219.025 36.1956C219.471 34.9007 220.89 34.2134 222.181 34.6616C223.481 35.1199 224.156 36.5443 223.709 37.8392C223.352 38.8652 222.389 39.5027 221.367 39.5027C221.099 39.5027 220.821 39.4628 220.553 39.3632ZM136.382 35.4187C136.005 34.1038 136.759 32.7193 138.079 32.3407C139.399 31.9622 140.769 32.7193 141.156 34.0441C141.533 35.3689 140.769 36.7435 139.459 37.122C139.221 37.1917 138.992 37.2216 138.764 37.2216C137.692 37.2216 136.7 36.5144 136.382 35.4187ZM204.693 34.8907C203.354 34.6019 202.5 33.287 202.788 31.9323C203.076 30.5876 204.396 29.7409 205.736 30.0298C207.075 30.3187 207.929 31.6335 207.641 32.9882C207.393 34.1536 206.361 34.9505 205.219 34.9505C205.041 34.9505 204.872 34.9306 204.693 34.8907ZM152.698 31.4741C152.49 30.1095 153.413 28.8345 154.763 28.6253C156.122 28.4062 157.393 29.3325 157.601 30.6972C157.819 32.0519 156.896 33.3269 155.537 33.546C155.408 33.5659 155.279 33.5759 155.15 33.5759C153.949 33.5759 152.897 32.6993 152.698 31.4741ZM188.407 32.4304C187.047 32.3109 186.035 31.0956 186.154 29.731C186.273 28.3564 187.484 27.3403 188.844 27.4698C190.213 27.5894 191.216 28.7946 191.097 30.1692C190.988 31.4642 189.896 32.4404 188.625 32.4404C188.556 32.4404 188.477 32.4304 188.407 32.4304ZM169.372 29.5716C169.332 28.197 170.404 27.0415 171.773 27.0017C173.143 26.9519 174.294 28.0276 174.334 29.4023C174.384 30.7769 173.312 31.9323 171.942 31.9821C171.912 31.9821 171.883 31.9821 171.853 31.9821C170.523 31.9821 169.421 30.9163 169.372 29.5716Z" fill="#E9AE0C"/>
+<path d="M181.647 325C147.412 325 114.606 309.755 89.2974 282.081C64.1572 254.598 48.4285 217.166 45.0071 176.68C44.9278 175.702 45.5228 174.819 46.336 174.724C47.1492 174.628 47.8831 175.344 47.9624 176.322C54.9441 259.035 112.414 321.421 181.647 321.421C255.738 321.421 316.025 248.908 316.025 159.789C316.025 158.799 316.689 158 317.512 158C318.336 158 319 158.799 319 159.789C319 250.888 257.384 325 181.647 325Z" fill="#2D5284"/>
+<path d="M317.489 166.391C316.665 166.391 316 165.723 316 164.897C316 132.155 327.622 100.419 348.741 75.5267C349.277 74.8991 350.21 74.8195 350.836 75.3573C351.461 75.8952 351.54 76.8316 351.004 77.4691C330.351 101.824 318.977 132.872 318.977 164.906C318.977 165.723 318.312 166.391 317.489 166.391Z" fill="#2D5284"/>
+<path d="M46.451 173.949C42.898 173.949 40 171.04 40 167.475C40 163.909 42.898 161 46.451 161C50.004 161 52.902 163.909 52.902 167.475C52.902 171.04 50.004 173.949 46.451 173.949ZM46.451 163.988C44.5356 163.988 42.9774 165.552 42.9774 167.475C42.9774 169.397 44.5356 170.961 46.451 170.961C48.3665 170.961 49.9246 169.397 49.9246 167.475C49.9246 165.552 48.3665 163.988 46.451 163.988Z" fill="#2D5284"/>
+</svg>
--- a/src/assets/logo.svg
+++ b/src/assets/logo.svg
@ -0,0 +1,15 @@
+<svg width="101" height="50" viewBox="0 0 101 50" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_69_11524" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="-1" y="0" width="102" height="50">
+<path d="M100.255 0H-0.000976562V50H100.255V0Z" fill="white"/>
+</mask>
+<g mask="url(#mask0_69_11524)">
+<path d="M27.5442 20.6758L17.6609 30.545C17.3551 30.4603 17.0388 30.4202 16.7217 30.4258C15.662 30.4557 14.6575 30.9047 13.9285 31.6743C13.1995 32.444 12.8056 33.4714 12.8333 34.5311V34.5593C12.8672 35.6042 13.3094 36.5942 14.0648 37.3169C14.8203 38.0396 15.8289 38.4374 16.8743 38.425C17.9197 38.4125 18.9186 37.9909 19.6567 37.2505C20.3948 36.5101 20.8133 35.5098 20.8224 34.4644L27.4578 27.8268V49.9999H32.4045V20.6758H27.5442ZM16.8702 35.8933C16.5793 35.9011 16.2927 35.8225 16.0465 35.6674C15.8003 35.5124 15.6057 35.2878 15.4871 35.0221C15.3685 34.7564 15.3314 34.4615 15.3805 34.1747C15.4295 33.8879 15.5625 33.6221 15.7626 33.4108C15.9627 33.1996 16.2209 33.0524 16.5046 32.988C16.7883 32.9235 17.0848 32.9446 17.3565 33.0486C17.6283 33.1526 17.8631 33.3348 18.0312 33.5723C18.1994 33.8097 18.2934 34.0917 18.3013 34.3825C18.3069 34.5758 18.2743 34.7683 18.2054 34.9489C18.1365 35.1296 18.0325 35.2948 17.8996 35.4352C17.7666 35.5755 17.6072 35.6883 17.4306 35.7669C17.2539 35.8455 17.0635 35.8884 16.8702 35.8933Z" fill="#2D5284"/>
+<path d="M14.9759 30.1942L4.94407 20.6763H-0.000976562V49.9992H4.9452V28.13L12.2905 34.8444C12.2905 33.2015 12.6389 31.3655 14.9765 30.1942" fill="#2D5284"/>
+<path d="M67.3756 4.19125C67.9718 5.15048 68.1626 6.30726 67.906 7.40715C67.6494 8.50704 66.9664 9.45995 66.0072 10.0563C65.9168 10.1128 65.8242 10.1653 65.7299 10.215C65.101 10.5739 64.3898 10.7638 63.6657 10.766C62.9416 10.7683 62.2293 10.5829 61.5981 10.228C61.1921 10.0247 60.8396 9.89307 60.5663 10.4256C59.8161 11.799 59.1776 13.2303 58.6568 14.706C58.5032 15.1821 58.5614 15.4644 59.1002 15.6435C59.7778 15.8443 60.3929 16.2149 60.8871 16.7202C61.3813 17.2254 61.7382 17.8486 61.924 18.5305C62.0505 18.9598 62.2476 19.0896 62.6881 18.9394C63.7775 18.5706 64.8749 18.2284 65.9773 17.8952C66.118 17.8739 66.2477 17.8066 66.3461 17.7036C66.4444 17.6007 66.5058 17.468 66.5206 17.3265C66.67 16.7379 66.9002 16.1729 67.2045 15.6474C68.599 12.5908 71.1325 10.2 74.2648 8.98477C77.397 7.76956 80.88 7.82617 83.9711 9.14251C84.3806 9.32267 84.8075 9.47176 85.1967 9.68807C87.0132 10.6798 88.5673 12.09 89.7303 13.802C90.8932 15.514 91.6314 17.4784 91.8839 19.5326C92.1363 21.5868 91.8957 23.6715 91.1819 25.6141C90.4681 27.5568 89.3017 29.3014 87.7793 30.7034C87.1236 31.3173 85.9184 31.5929 85.8591 32.5067C85.8026 33.3996 86.3578 34.3314 86.6419 35.2469C86.6719 35.338 86.6974 35.4305 86.7181 35.5242C86.8034 35.9427 87.0355 35.9879 87.4213 35.8777C88.2173 35.6197 89.0723 35.6055 89.8764 35.837C90.6806 36.0684 91.3972 36.535 91.9343 37.1767C92.2697 37.541 92.4736 37.5873 92.8548 37.2507C94.0458 36.1876 95.1345 35.0153 96.1067 33.7491C96.4659 33.2889 96.3287 33.0969 95.9316 32.7636C95.166 32.173 94.6173 31.3456 94.3711 30.4104C94.1249 29.4753 94.195 28.4849 94.5706 27.5938C94.949 26.7045 95.6152 25.9681 96.4622 25.5027C97.3093 25.0373 98.2881 24.87 99.2417 25.0275C99.7404 25.0874 99.9098 24.9841 99.9889 24.478C100.219 22.931 100.299 21.3654 100.228 19.8029C100.206 19.189 100.011 19.0388 99.3744 19.0552C98.5697 19.1087 97.7672 18.9227 97.068 18.5207C96.3689 18.1186 95.8045 17.5186 95.4459 16.7962C94.9055 15.8736 94.7377 14.7795 94.9768 13.7374C95.2159 12.6953 95.8439 11.7838 96.7325 11.1892C97.4062 10.7171 97.4232 10.3839 96.9855 9.75414C96.3256 8.77396 95.613 7.83036 94.8507 6.92751C94.5356 6.5655 94.2825 6.43448 93.8183 6.79028C91.9902 8.18976 90.1197 8.27447 88.426 7.10259C86.8446 6.00978 86.2313 4.08959 86.8638 1.99094C86.9988 1.54252 86.9525 1.34485 86.5357 1.19349C84.9741 0.629023 83.3564 0.233689 81.7104 0.0142728C81.3117 -0.0393795 81.1767 0.0464642 81.0892 0.474553C80.6323 2.7336 79.2509 4.08112 77.2561 4.3025C75.2614 4.52389 73.6287 3.54911 72.7211 1.51258C72.4669 0.94274 72.2128 0.934269 71.7 1.11725C70.2919 1.64213 68.9371 2.30024 67.654 3.08262C67.152 3.37912 67.0402 3.60446 67.3745 4.18673L67.3756 4.19125Z" fill="#E9AE0C"/>
+<path d="M66.5117 47.2197V41.7449C67.5719 43.0366 68.8449 44.1378 70.2759 45.0008C71.4438 45.658 72.762 46.0016 74.1021 45.9981C75.318 46.0666 76.52 45.7111 77.5031 44.9923C77.9094 44.6669 78.2336 44.2505 78.4494 43.7768C78.6653 43.3031 78.7667 42.7852 78.7456 42.2651C78.7596 41.3669 78.463 40.4915 77.9058 39.7869C77.3459 39.0749 76.0082 38.0484 73.8926 36.7073C70.617 34.5917 68.5605 32.9539 67.7231 31.7938C66.8703 30.5811 66.4305 29.1261 66.4688 27.644C66.4387 26.6003 66.6375 25.5628 67.0514 24.6042C67.4653 23.6457 68.0842 22.7895 68.8645 22.0958C70.5688 20.612 72.7761 19.8364 75.034 19.9282C76.1546 19.9285 77.2692 20.0927 78.3423 20.4156C79.4983 20.773 80.6031 21.2785 81.6292 21.9196V26.6235C80.5586 25.7264 79.3729 24.9765 78.1034 24.3938C77.0839 23.9436 75.9829 23.7074 74.8685 23.6997C73.7282 23.6496 72.6049 23.9897 71.6838 24.6637C71.2947 24.9479 70.9795 25.3214 70.7648 25.7527C70.55 26.1841 70.442 26.6607 70.4498 27.1425C70.4498 28.5803 72.1573 30.3639 75.5722 32.493L76.1934 32.8663C78.972 34.5949 80.7902 36.1197 81.6479 37.4409C82.5469 38.915 82.994 40.6203 82.9338 42.3458C82.9594 43.3808 82.7571 44.4087 82.3414 45.3568C81.9256 46.305 81.3065 47.1501 80.528 47.8325C78.8258 49.3133 76.6225 50.0886 74.3681 50C72.9312 50.0187 71.5014 49.7935 70.1397 49.3342C68.813 48.8521 67.5838 48.1356 66.5106 47.2186L66.5117 47.2197Z" fill="#2D5284"/>
+<path d="M50.7903 38.0453C51.2426 37.791 51.6123 37.412 51.8552 36.9534C52.0981 36.4948 52.204 35.9761 52.1602 35.459C52.1165 34.9419 51.9249 34.4484 51.6084 34.0371C51.2919 33.6259 50.8638 33.3144 50.3752 33.1397C49.8861 32.9515 49.4667 32.6178 49.1733 32.1836L47.5536 29.492C47.3072 29.0295 47.2086 28.5026 47.2712 27.9823C47.3256 27.5715 47.2911 27.1538 47.1701 26.7574C47.1174 26.5867 47.0446 26.4229 46.9533 26.2694C46.7372 25.8742 46.4285 25.5372 46.0537 25.2873C45.6788 25.0375 45.249 24.8822 44.8011 24.8348C44.3531 24.7874 43.9003 24.8493 43.4815 25.0152C43.0627 25.181 42.6903 25.446 42.3963 25.7872C42.1023 26.1285 41.8953 26.536 41.7932 26.9747C41.6911 27.4134 41.6969 27.8704 41.81 28.3064C41.9232 28.7424 42.1403 29.1446 42.4429 29.4783C42.7454 29.8121 43.1243 30.0675 43.5472 30.2228C44.0357 30.4119 44.4547 30.7459 44.7479 31.18L46.3682 33.8711C46.615 34.3334 46.7136 34.8605 46.6506 35.3807C46.5906 35.8398 46.6418 36.3066 46.7997 36.7418C46.9123 37.0312 47.0786 37.2968 47.2899 37.5245C47.723 38.0033 48.309 38.3168 48.9477 38.4113C49.5864 38.5059 50.2381 38.3757 50.7914 38.043L50.7903 38.0453ZM44.5813 26.0435C44.8907 26.0434 45.1933 26.1351 45.4506 26.3069C45.708 26.4788 45.9086 26.7231 46.027 27.009C46.1455 27.2949 46.1765 27.6095 46.1162 27.913C46.0559 28.2165 45.9068 28.4953 45.688 28.7141C45.4692 28.9329 45.1904 29.0819 44.8869 29.1423C44.5834 29.2026 44.2688 29.1716 43.9829 29.0531C43.697 28.9346 43.4527 28.734 43.2809 28.4767C43.109 28.2193 43.0173 27.9168 43.0174 27.6073C43.0176 27.1926 43.1824 26.795 43.4756 26.5017C43.7689 26.2085 44.1666 26.0437 44.5813 26.0435ZM49.3716 33.9937C49.681 33.9937 49.9834 34.0854 50.2407 34.2573C50.498 34.4292 50.6985 34.6735 50.8169 34.9594C50.9353 35.2452 50.9663 35.5598 50.9059 35.8632C50.8455 36.1667 50.6965 36.4455 50.4778 36.6642C50.259 36.883 49.9802 37.032 49.6768 37.0924C49.3733 37.1527 49.0588 37.1218 48.7729 37.0034C48.4871 36.885 48.2427 36.6844 48.0708 36.4272C47.8989 36.1699 47.8072 35.8675 47.8072 35.5581C47.8072 35.1432 47.972 34.7452 48.2654 34.4519C48.5588 34.1585 48.9567 33.9937 49.3716 33.9937Z" fill="#E9AE0C"/>
+<path d="M52.7668 41.4521C53.5145 40.9501 54.4249 40.7507 55.3139 40.8942C54.608 40.6897 52.8177 38.7283 52.829 37.0063C52.7584 37.3514 52.3772 38.1545 51.1347 38.8599C50.7077 39.1093 50.2322 39.264 49.7402 39.3137C49.2483 39.3634 48.7514 39.3069 48.2832 39.1479C49.3263 39.4964 51.3741 42.0254 51.1223 43.5858C51.4196 42.7117 51.9986 41.9611 52.7685 41.4516L52.7668 41.4521Z" fill="#E9AE0C"/>
+<path d="M41.2065 49.9988V26.0642C41.7673 25.0392 43.1832 23.9391 44.3799 24.0752C43.6457 23.9984 41.4996 22.3724 41.2065 20.6753H36.2598V49.9988H41.2065Z" fill="#E9AE0C"/>
+<path d="M55.9185 42.1547C55.271 41.8165 54.5156 41.7494 53.8186 41.9681C53.1216 42.1868 52.54 42.6734 52.2018 43.3209C51.8636 43.9684 51.7964 44.7238 52.0151 45.4208C52.2339 46.1178 52.7205 46.6994 53.368 47.0376C53.4786 47.0953 53.593 47.1455 53.7103 47.1879C54.1987 47.3765 54.6177 47.7101 54.9109 48.144L55.9185 49.9975H60.8647V20.6763H55.9185V42.1547ZM54.5546 43.0177C54.8552 43.0177 55.149 43.1068 55.3989 43.2738C55.6488 43.4408 55.8436 43.6781 55.9587 43.9558C56.0737 44.2335 56.1038 44.5391 56.0451 44.8339C55.9865 45.1287 55.8418 45.3995 55.6292 45.6121C55.4167 45.8246 55.1459 45.9694 54.8511 46.028C54.5563 46.0866 54.2507 46.0565 53.973 45.9415C53.6953 45.8265 53.4579 45.6317 53.2909 45.3818C53.1239 45.1318 53.0348 44.838 53.0348 44.5374C53.0348 44.1344 53.1949 43.7478 53.4799 43.4628C53.7649 43.1778 54.1515 43.0177 54.5546 43.0177Z" fill="#E9AE0C"/>
+</g>
+</svg>
--- a/src/assets/products/end.png
+++ b/src/assets/products/end.png
--- a/src/assets/products/lighting.png
+++ b/src/assets/products/lighting.png
--- a/src/assets/products/measurement.png
+++ b/src/assets/products/measurement.png
--- a/src/core/base/GlobalBaseComponentsRegistration.js
+++ b/src/core/base/GlobalBaseComponentsRegistration.js
@ -0,0 +1,10 @@
+import app from '@/main';
+
+
+const requireComponent =import.meta.glob("./Base*.vue");
+
+Object.keys(requireComponent).forEach(fileName => {
+  const componentConfig = requireComponent[fileName];
+  const component = componentConfig.default || componentConfig;
+  app.component(component.name, component);
+});
--- a/src/core/classes/base/BaseError.js
+++ b/src/core/classes/base/BaseError.js
@ -0,0 +1,15 @@
+import { useSnackbarStore } from '@/store/SnackbarStore';
+
+export class BaseError {
+  data;//could be validation errors or any meta data of errors
+  message ="Unexpected Failure Please Check Your Internet Connection.";//the previewed message for user
+
+  initData(error, data) {
+    this.error = error;
+    this.data = data;
+    return this;
+  }
+  dispatchError() {
+    useSnackbarStore().showSnackbar(`${this.message}`, { color: 'error' })
+  }
+}
--- a/src/core/classes/base/BasePaginatedCollection.js
+++ b/src/core/classes/base/BasePaginatedCollection.js
@ -0,0 +1,32 @@
+export default class BasePaginatedCollection {
+  collection = new Array();
+  total;
+  perPage;
+  currentPage;
+  lastPage;
+  isLastPage;
+
+  constructor(
+    paginationResponse //! this should be overridden in concretes (specific object collection init)
+  ) {
+    if (paginationResponse == undefined) {
+      //case of empty parameter constructor
+      this.currentPage = 1;
+      this.isLastPage = true;
+    } else {
+      this.total = paginationResponse.total;
+      this.perPage = paginationResponse.per_page;
+      this.currentPage = paginationResponse.current_page;
+      this.lastPage = paginationResponse.last_page;
+      this.isLastPage = this.currentPage == this.lastPage;
+    }
+  }
+  //! this should be overridden in concretes  (specific object collection update)
+  updatePaginationPage(paginationResponse) {
+    this.total = paginationResponse.total;
+    this.perPage = paginationResponse.per_page;
+    this.currentPage = paginationResponse.current_page;
+    this.lastPage = paginationResponse.last_page;
+    this.isLastPage = this.currentPage == this.lastPage;
+  }
+}
--- a/src/core/classes/base/BaseService.js
+++ b/src/core/classes/base/BaseService.js
@ -0,0 +1,185 @@
+import Mapper from "../mapper/Mapper";
+import { Notify } from "../notify/Notify";
+
+export default class BaseService {
+  static data;
+
+  static checkIfExists(item = null, callbackFn = null) {
+    try {
+      let checkIfElementExists =
+        item !== null && item !== undefined && item !== "";
+      if (checkIfElementExists) {
+        return callbackFn !== null ? callbackFn(item) : checkIfElementExists;
+      }
+    } catch (e) {
+      Notify.showMessage("error", e);
+    }
+  }
+
+  static resolveStatusResponse(status, res = {}) {
+    try {
+      return status < 300 ? Promise.resolve(res) : Promise.reject(res);
+    } catch (e) {
+      Notify.showMessage("error", e);
+    }
+  }
+
+  static FormBuilder() {
+    try {
+      let formData = new FormData();
+      Object.keys(this.data).forEach((item) => {
+        formData.append(item, this.data[item]);
+      });
+      return formData;
+    } catch (e) {
+      Notify.showMessage("error", e);
+    }
+  }
+  static objectToFormDataWithoutArrayBrackets(
+    obj,
+    formData = new FormData(),
+    parentKey = ""
+  ) {
+    for (let key in obj) {
+      if (Object.prototype.hasOwnProperty.call(obj, key)) {
+        const nestedKey = parentKey ? `${parentKey}.${key}` : key;
+        const value = obj[key];
+
+        if (value === null || typeof value === "undefined") {
+          continue; // Skip null and undefined values
+        }
+
+        if (Array.isArray(value)) {
+          if (value.length === 0) {
+            formData.append(nestedKey, ""); // Append an empty value to represent an empty array
+          } else {
+            value.forEach((item, index) => {
+              if (item instanceof File) {
+                formData.append(nestedKey, item);
+              } else {
+                BaseService.objectToFormData(
+                  item,
+                  formData,
+                  `${nestedKey}[${index}]`
+                );
+              }
+            });
+          }
+        } else if (typeof value === "object") {
+          if (value instanceof File) {
+            formData.append(nestedKey, value);
+          } else {
+            BaseService.objectToFormData(value, formData, nestedKey);
+          }
+        } else {
+          formData.append(nestedKey, value);
+        }
+      }
+    }
+
+    return formData;
+  }
+
+  static toString(keys) {
+    try {
+      keys.forEach((key) => {
+        if (this.data[key]) {
+          this.data[key] = this.data[key].toString();
+        }
+      });
+      return this;
+    } catch (e) {
+      Notify.showMessage("error", e);
+    }
+  }
+
+  static setData(data) {
+    try {
+      this.data = Mapper.camelToUnderscore(data);
+      return this;
+    } catch (e) {
+      Notify.showMessage("error", e);
+    }
+  }
+
+  static filterForEmpty() {
+    try {
+      let newData = this.data;
+      Object.keys(this.data).forEach((item) => {
+        this.checkIfEmpty(this.data[item], function (value) {
+          delete newData[value];
+        });
+      });
+      this.data = newData;
+      return this;
+    } catch (e) {
+      Notify.showMessage("error", e);
+    }
+  }
+
+  static checkIfEmpty(item, callback) {
+    try {
+      if (item === "" || item == null || item == undefined) {
+        return callback(item);
+      }
+    } catch (e) {
+      Notify.showMessage("error", e);
+    }
+  }
+
+  static unsetData(dataToUnset) {
+    try {
+      let newData = this.data;
+      dataToUnset.forEach((item) => {
+        delete newData[item];
+      });
+      this.data = newData;
+      return this;
+    } catch (e) {
+      Notify.showMessage("error", e);
+    }
+  }
+
+  static getWithFormBuilder() {
+    try {
+      return this.FormBuilder();
+    } catch (e) {
+      Notify.showMessage("error", e);
+    }
+  }
+
+  static customizeData(obj) {
+    try {
+      Object.keys(obj).map((item) => (this.data[item] = this.data[obj[item]]));
+      return this;
+    } catch (e) {
+      Notify.showMessage("error", e);
+    }
+  }
+
+  static get() {
+    try {
+      return this.data;
+    } catch (e) {
+      Notify.showMessage("error", e);
+    }
+  }
+
+  static responseMapperToCamel(res) {
+    try {
+      if (res.data.response) {
+        if (!Array.isArray(res.data.response)) {
+          res.data.response = [res.data.response];
+        }
+        res.data.response.map((item, index) => {
+          if (res.data.response[index]) {
+            res.data.response[index] = Mapper.underscoreToCamel(item);
+          }
+        });
+      }
+      return res;
+    } catch (e) {
+      Notify.showMessage("error", e);
+    }
+  }
+}
--- a/src/core/classes/base/BaseStore.js
+++ b/src/core/classes/base/BaseStore.js
@ -0,0 +1,25 @@
+import BaseService from "./BaseService";
+
+export default class BaseStore {
+  static promiseHandler(promise, onResolved, onRejected) {
+    return new Promise((resolve, reject) => {
+      promise()
+        .then((res) => {
+          let { data, status } = res;
+          return BaseService.resolveStatusResponse(status, res).then(() => {
+            if (onResolved) {
+              onResolved(data);
+            }
+            return resolve(res);
+          });
+        })
+        .catch((err) => {
+          if (onRejected) {
+            onRejected(err, reject);
+          } else {
+            reject(err);
+          }
+        });
+    });
+  }
+}
--- a/src/core/classes/client/Client.js
+++ b/src/core/classes/client/Client.js
@ -0,0 +1,146 @@
+import { Notify } from "../notify/Notify";
+import axios from "axios";
+import { useGlobalStore } from "../../../store/GlobalStore";
+import pinia from "@/store";
+import { ResponseErrorWrapper } from "../error/ResponseErrorWrapper";
+
+const globalStore = useGlobalStore(pinia);
+
+export default class Client {
+  static initHttp(axios) {
+    axios.defaults.baseURL = import.meta.env.VITE_APP_API_BASE_URL;
+    axios.interceptors.request.use(
+      async (config) => {
+        config = this.prepareInterceptorsConfig(config);
+        globalStore.changeLoadingStatus(true);
+        return config;
+      },
+      (error) => {
+        console.warn(error);
+        globalStore.changeLoadingStatus(false);
+      }
+    );
+    axios.interceptors.response.use(
+      (response) => {
+        if (response?.status >= 200 && response?.status < 300) {
+          if (response?.data?.message)
+            Notify.showMessage("success", response?.data?.message);
+        }
+        globalStore.changeLoadingStatus(false);
+        return Promise.resolve(response);
+      },
+      async (error) => {
+        try {
+          globalStore.changeLoadingStatus(false);
+          return new ResponseErrorWrapper(error);
+        } catch (e) {
+          console.warn(e);
+          globalStore.changeLoadingStatus(false);
+          return Promise.reject(e);
+        }
+      }
+    );
+    return axios;
+  }
+
+  static async get(url, queryParams = null) {
+    // get header
+    let headers = this.getHeaders();
+    // check if there is any query params inserted
+    let config = {
+      params: queryParams !== null ? queryParams : "",
+      headers: headers,
+    };
+    return await axios
+      .get(url, config)
+      .then((res) => {
+        return Promise.resolve(res);
+      })
+      .catch(function (error) {
+        // show error if failed
+        Notify.showMessage("error", Notify.getMessage(error));
+      });
+  }
+
+  static async post(url, data, options = {}) {
+    // get header
+    let headers = this.getHeaders(options);
+    return await axios
+      .post(url, data, { headers: headers })
+      .then((res) => {
+        return Promise.resolve(res);
+      })
+      .catch((error) => {
+        // show error if failed
+        Notify.showMessage("error", Notify.getMessage(error));
+      });
+  }
+
+  static async patch(url, data, options = {}) {
+    // get header
+    let headers = this.getHeaders(options);
+    return await axios
+      .patch(url, data, { headers: headers })
+      .then((res) => {
+        return Promise.resolve(res);
+      })
+      .catch((error) => {
+        // show error if failed
+        Notify.showMessage("error", Notify.getMessage(error));
+      });
+  }
+  static async put(url, data, options = {}) {
+    // get header
+    let headers = this.getHeaders(options);
+    // add _method parameter
+    let config = {
+      params: { _method: "PUT" },
+      headers: headers,
+    };
+    return await axios
+      .post(url, data, config)
+      .then((res) => {
+        return Promise.resolve(res);
+      })
+      .catch((error) => {
+        // show error if failed
+        Notify.showMessage("error", Notify.getMessage(error));
+      });
+  }
+
+  static async delete(url, options = {}) {
+    // get header
+    let headers = this.getHeaders(options);
+    return await axios
+      .delete(url, { headers: headers })
+      .then((res) => {
+        return Promise.resolve(res);
+      })
+      .catch((error) => {
+        // show error if failed
+        Notify.showMessage("error", Notify.getMessage(error));
+      });
+  }
+
+  static getHeaders(options = {}) {
+    let result = {
+      accept: "application/json",
+      "Access-Control-Allow-Origin": "*",
+      lang: localStorage.getItem("locale") || "ar",
+      "ngrok-skip-browser-warning": "69420",
+    };
+    if (options.headers) {
+      for (const [key, value] of Object.entries(options.headers)) {
+        result[key] = value;
+      }
+    }
+    return result;
+  }
+
+  static prepareInterceptorsConfig(config) {
+    config.params = {
+      ...config.params,
+    };
+    return config;
+  }
+}
--- a/src/core/classes/error/BadRequestError.js
+++ b/src/core/classes/error/BadRequestError.js
@ -0,0 +1,11 @@
+import { translate } from "@/plugins/i18n";
+import { BaseError } from "../base/BaseError";
+import { useSnackbarStore } from '@/store/SnackbarStore';
+
+
+export class BadRequestError extends BaseError {
+    message = translate('errorMessages.BadRequestError') ;
+    dispatchError() {
+      useSnackbarStore().showSnackbar(`${this.data.message}`, { color: 'error' })
+    }
+}
--- a/src/core/classes/error/ErrorRegistration.js
+++ b/src/core/classes/error/ErrorRegistration.js
@ -0,0 +1,23 @@
+import { RequestError } from "./RequestError";
+import { BadRequestError } from "./BadRequestError";
+import { UnAuthenticatedError } from "./UnAuthenticatedError";
+import { UnAuthorizedError } from "./UnAuthorizedError";
+import { NotFoundError } from "./NotFoundError";
+import { UnprocessableEntityError } from "./UnprocessableEntityError";
+import { ServerError } from "./ServerError";
+
+export class ErrorRegistration {
+  statusCodeClasses = {
+    301: new RequestError(),
+    400: new BadRequestError(),
+    401: new UnAuthenticatedError(),
+    403: new UnAuthorizedError(), 
+    404: new NotFoundError(), 
+    422: new UnprocessableEntityError(),
+    500: new ServerError(),
+  };
+
+  getClassFromStatusCode(code) {
+    return this.statusCodeClasses[code];
+  }
+}
--- a/src/core/classes/error/FailedRequestError.js
+++ b/src/core/classes/error/FailedRequestError.js
@ -0,0 +1,6 @@
+import { translate } from "@/plugins/i18n";
+import { BaseError } from "../base/BaseError";
+
+export class FailedRequestError extends BaseError {
+  message = translate('errorMessages.FailedRequestError') ;
+}
--- a/src/core/classes/error/NotFoundError.js
+++ b/src/core/classes/error/NotFoundError.js
@ -0,0 +1,6 @@
+import { translate } from "@/plugins/i18n";
+import { BaseError } from "../base/BaseError";
+
+export class NotFoundError extends BaseError {
+  message = translate("errorMessages.NotFoundError");
+}
--- a/src/core/classes/error/RequestError.js
+++ b/src/core/classes/error/RequestError.js
@ -0,0 +1,6 @@
+import { translate } from "@/plugins/i18n";
+import { BaseError } from "../base/BaseError";
+
+export class RequestError extends BaseError {
+  message = translate("errorMessages.RequestError");
+}
--- a/src/core/classes/error/ResponseErrorWrapper.js
+++ b/src/core/classes/error/ResponseErrorWrapper.js
@ -0,0 +1,26 @@
+import { ErrorRegistration } from "./ErrorRegistration";
+import { FailedRequestError } from "./FailedRequestError";
+
+
+export class ResponseErrorWrapper {
+  
+  constructor(error) {
+    this.error = error;
+    this.data = this.registerResponse(error);
+    return this.wrapError();
+  }
+
+  registerResponse(error) {
+    return error?.response?.data;
+  }
+
+  wrapError() {
+    let errorClass = new ErrorRegistration().getClassFromStatusCode(
+      this?.error?.response?.status
+    );
+    return errorClass != undefined
+      ? errorClass?.initData(this.error, this.data).dispatchError()
+      :new FailedRequestError().initData(this.error, this.data).dispatchError();//case no status for the error response
+  }
+
+}
--- a/src/core/classes/error/ServerError.js
+++ b/src/core/classes/error/ServerError.js
@ -0,0 +1,6 @@
+import { translate } from "@/plugins/i18n";
+import { BaseError } from "../base/BaseError";
+
+export class ServerError extends BaseError {
+  message = translate("errorMessages.ServerError");
+}
--- a/src/core/classes/error/UnAuthenticatedError.js
+++ b/src/core/classes/error/UnAuthenticatedError.js
@ -0,0 +1,22 @@
+import { Notify } from "../notify/Notify";
+import { BaseError } from "../base/BaseError";
+import { translate } from "@/plugins/i18n";
+// import { useAuthStore } from "@/modules/auth/store/AuthStore";
+// import pinia from "@/store";
+
+// const authStore=useAuthStore(pinia);
+export class UnAuthenticatedError extends BaseError {
+  message = translate("errorMessages.UnAuthenticatedError");
+  sessionExpiredMessage = "Session Expired, Please Login Again";
+  requiresAuthMessage = "Please Login To Your Account First.";
+  //TODO handle logout/storage clear cases
+  // dispatchError() {
+    // if (authStore.isAuthenticated) {
+    //   //case the token lifetime has expired
+    //   Notify.showMessage("warning", this.sessionExpiredMessage);
+    // } else {//case no token is stored
+    //   Notify.showMessage("error", this.requiresAuthMessage);
+    // }
+    // authStore.localLogout();
+  // }
+}
--- a/src/core/classes/error/UnAuthorizedError.js
+++ b/src/core/classes/error/UnAuthorizedError.js
@ -0,0 +1,6 @@
+import { translate } from "@/plugins/i18n";
+import { BaseError } from "../base/BaseError";
+
+export class UnAuthorizedError extends BaseError {
+  message = translate("errorMessages.UnAuthorizedError");
+}
--- a/src/core/classes/error/UnprocessableEntityError.js
+++ b/src/core/classes/error/UnprocessableEntityError.js
@ -0,0 +1,15 @@
+import { translate } from "@/plugins/i18n";
+import { BaseError } from "../base/BaseError";
+import { useSnackbarStore } from "@/store/SnackbarStore";
+
+export class UnprocessableEntityError extends BaseError {
+  message = translate("errorMessages.UnprocessableEntityError");
+
+  dispatchError() {
+    Object.values(this.data.errors ?? []).forEach((error) => {
+      if (error) {
+        useSnackbarStore().showSnackbar(`${error}`, { color: "error" });
+      }
+    });
+  }
+}
--- a/src/core/classes/file/File.js
+++ b/src/core/classes/file/File.js
@ -0,0 +1,11 @@
+export default class File {
+  static resolveFile(file) {
+    if (file.$refs.input.files) {
+      return file.$refs.input.files[0];
+    }
+  }
+
+  static basicReturnFile(file) {
+    return file;
+  }
+}
--- a/src/core/classes/mapper/Mapper.js
+++ b/src/core/classes/mapper/Mapper.js
@ -0,0 +1,27 @@
+export default class Mapper {
+  /**
+   * @desc this function convert all obj content to camelCase words
+   * @author karam mustafa
+   * @return Object
+   * */
+  static underscoreToCamel(obj) {
+    return JSON.parse(
+      JSON.stringify(obj).replace(
+        /(_\w)\w+":/g,
+        match => match[1].toUpperCase() + match.substring(2)
+      )
+    );
+  }
+  /**
+   * @desc this function return all keys from an object in camel case formatting and convert to under score words
+   * @author karam mustafa
+   * @return Object
+   * */
+  static camelToUnderscore(obj) {
+    let newObj = {};
+    for (let camel in obj) {
+      newObj[camel.replace(/([A-Z])/g, "_$1").toLowerCase()] = obj[camel];
+    }
+    return newObj;
+  }
+}
--- a/src/core/classes/notify/Notify.js
+++ b/src/core/classes/notify/Notify.js
@ -0,0 +1,26 @@
+// import EventBus  from "../../../main";
+
+export class Notify {
+  static getMessage(code) {
+    let codeAvailable = {
+      400: "خطأ في الطلب،الرجاء المحاولة مرة أخرى",
+      401: "انتهت صلاحية جلستك، الرجاء تسجيل الدخول مرة أخرى",
+      403: "لا يمكن إتمام الطلب لعدم امتلاك الصلاحيات اللازمة",
+      301:"خطأ في الطلب،الرجاء المحاولة مرة أخرى",
+      422:  "الرجاء إدخال البيانات بالشكل الصحيح",
+      500:  "خطأ في الخادم،الرجاء المحاولة مرة أخرى",
+    };
+    return codeAvailable[code] != null || undefined
+      ? codeAvailable[code]
+      : code;
+  }
+
+  static showMessage(type, message) {
+    // EventBus.$notify({
+    //   group: "public",
+    //   type: type,
+    //   title: message,
+    //   duration: 5000
+    // });
+  }
+}
--- a/src/core/components/NotFound.vue
+++ b/src/core/components/NotFound.vue
@ -0,0 +1,29 @@
+<script setup></script>
+<template>
+  <div>
+    <v-container fill-height fluid>
+      <v-row align="center" justify="center" class="row-height py-10">
+        <v-col cols="12" sm="6" lg="4" align="center" justify="center">
+          <!-- <img src="@/assets/page-not-found.svg" alt="" /> -->
+
+          <h2 class="text-primary my-15">
+            {{ $t("sorryPageNotFound") }}
+          </h2>
+
+          <v-btn
+            class="bg-accent rounded-xl"
+            @click="$router.push({ name: 'home' })"
+          >
+            {{ $t("goBackHome") }}
+          </v-btn>
+        </v-col>
+      </v-row>
+    </v-container>
+  </div>
+</template>
+
+<style>
+.row-height {
+  min-height: 60vh;
+}
+</style>
--- a/src/core/components/breadcrumbs.vue
+++ b/src/core/components/breadcrumbs.vue
@ -0,0 +1,34 @@
+<template>
+  <v-row justify="center" class="ma-0 py-5">
+    <v-col cols="11" class="pa-0">
+      <v-breadcrumbs :items="breadcrumbsItems">
+        <template v-slot:divider>
+          <v-icon class="px-0" icon="mdi-chevron-right"></v-icon>
+        </template>
+      </v-breadcrumbs>
+    </v-col>
+  </v-row>
+</template>
+
+<script setup>
+const props = defineProps({
+  breadcrumbsItems: Array,
+});
+</script>
+
+<style>
+.v-breadcrumbs-divider {
+  padding: 0 !important;
+}
+.v-breadcrumbs-item--link {
+  text-decoration: none !important;
+}
+.v-breadcrumbs-item {
+  color: #808080 !important;
+  text-decoration: none !important;
+}
+.v-breadcrumbs-item--disabled {
+  opacity: 1 !important;
+  color: #2d5284 !important;
+}
+</style>
--- a/src/core/components/decorations/gear.vue
+++ b/src/core/components/decorations/gear.vue
@ -0,0 +1,38 @@
+<template>
+  <div style="width: 100px">
+    <v-img
+      class="gear"
+      :height="height"
+      src="@/assets/decorations/gear.svg"
+    ></v-img>
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  height: Number,
+});
+</script>
+<style scoped>
+.gear {
+  animation: rotate 5s linear infinite;
+}
+
+@keyframes rotate {
+  0% {
+    transform: rotate(0deg);
+  }
+  40% {
+    transform: rotate(360deg);
+  }
+  50% {
+    transform: rotate(360deg);
+  }
+  90% {
+    transform: rotate(360deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+</style>
--- a/src/core/components/loader/LoadingProgress.vue
+++ b/src/core/components/loader/LoadingProgress.vue
@ -0,0 +1,47 @@
+<script setup>
+import { useGlobalStore } from "@/store/GlobalStore";
+
+const globalStore = useGlobalStore();
+</script>
+
+<template>
+  <div class="loading-area">
+    <v-progress-linear
+      :active="globalStore.getIsLoading"
+      indeterminate
+      absolute
+      top
+      color="primary"
+      height="5px"
+      class="mt-0 progress-bar"
+    ></v-progress-linear>
+    <v-overlay
+      width="100%"
+      v-model="globalStore.getIsLoading"
+      scrim="lightNeutral"
+      opacity="0.5"
+      class="align-center justify-center"
+    >
+      <v-row>
+        <v-col align="center">
+          <v-progress-circular
+            indeterminate
+            size="64"
+            color="primary"
+          ></v-progress-circular>
+        </v-col>
+      </v-row>
+    </v-overlay>
+  </div>
+</template>
+
+<style scoped>
+.loading-area {
+  z-index: 999;
+  position: fixed;
+}
+.progress-bar {
+  z-index: 999;
+  position: fixed;
+}
+</style>
--- a/src/core/components/navs/SideNav.vue
+++ b/src/core/components/navs/SideNav.vue
@ -0,0 +1,234 @@
+<template>
+  <v-slide-group
+    v-model="model"
+    mandatory
+    class="sid_nav"
+    show-arrows
+    direction="vertical"
+    :style="current === 'ar' ? 'right : 15px' : 'left : 15px'"
+  >
+    <v-slide-group-item
+      v-for="(item, index) in items"
+      :key="item.id"
+      v-slot="{ isSelected, toggle }"
+      class="px-1"
+    >
+      <v-hover>
+        <template v-slot="{ isHovering, props }">
+          <v-card
+            variant="text"
+            class="my-1 px-1"
+            @click="toggle"
+            height="120px"
+            v-bind="props"
+            :to="item.to"
+          >
+            <v-card-title
+              v-if="item.action === 'route'"
+              :class="isSelected ? 'active' : ''"
+              class="text-body-2 text-wrap text-white h-100 d-flex flex-column justify-center align-center hover_slide"
+              style="border-bottom: 1px solid white"
+            >
+              <div style="width: 50px; height: 45px">
+                <v-img
+                  :class="[isSelected ? 'icon' : '', isHovering ? 'icon' : '']"
+                  :height="50"
+                  :src="iconHandler(index)"
+                ></v-img>
+              </div>
+              <div class="text-center">
+                {{ $t(item.title) }}
+              </div>
+            </v-card-title>
+
+            <v-menu
+              v-if="item.action === 'menu'"
+              location="start"
+              @click="toggle"
+            >
+              <template v-slot:activator="{ isActive, props }">
+                <v-card-title
+                  :class="[
+                    isSelected ? 'active' : '',
+                    isActive ? 'active' : '',
+                    isHovering ? 'active' : '',
+                  ]"
+                  v-bind="props"
+                  style="border-bottom: 1px solid white"
+                  class="text-body-2 text-wrap text-white h-100 d-flex flex-column justify-center align-center"
+                >
+                  <div style="width: 50px; height: 45px">
+                    <v-img
+                      :class="[
+                        isSelected ? 'icon' : '',
+                        isActive ? 'icon' : '',
+                        isHovering ? 'icon' : '',
+                      ]"
+                      :height="60"
+                      :src="iconHandler(index)"
+                    ></v-img>
+                  </div>
+                  <div class="text-center">
+                    {{ $t(item.title) }}
+                  </div>
+                </v-card-title>
+              </template>
+
+              <v-list class="list_menu">
+                <v-list-item
+                  v-for="(item, index) in item.links"
+                  :key="index"
+                  class="pa-0"
+                  :to="item.to"
+                >
+                  <v-list-item-title class="px-0">{{
+                    $t(item.title)
+                  }}</v-list-item-title>
+                  <template v-slot:prepend>
+                    <v-icon>mdi-arrow-left</v-icon>
+                  </template>
+                </v-list-item>
+              </v-list>
+            </v-menu>
+          </v-card>
+        </template>
+      </v-hover>
+    </v-slide-group-item>
+    <template v-slot:next>
+      <v-btn
+        elevation="0"
+        :ripple="false"
+        variant="text"
+        icon="mdi-chevron-down"
+        color="white"
+      ></v-btn>
+    </template>
+    <template v-slot:prev>
+      <v-btn
+        elevation="0"
+        :ripple="false"
+        variant="text"
+        icon="mdi-chevron-up"
+        color="white"
+      ></v-btn>
+    </template>
+  </v-slide-group>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import { useLocale } from "vuetify";
+
+const model = ref(null);
+const { current } = useLocale();
+const items = [
+  {
+    id: "1",
+    title: "AbouttheAward",
+    action: "route",
+    to: "/about_award",
+  },
+  {
+    id: "2",
+    title: "AwardSponsor",
+    action: "route",
+    to: "/award_sponsor",
+  },
+  {
+    id: "3",
+    title: "PartnersStrategists",
+    action: "route",
+    to: "/strategic_partners",
+  },
+  {
+    id: "4",
+    title: "PreviousSessions",
+    action: "menu",
+    links: [
+      {
+        title: "Previouscourses",
+        to: "/winners",
+      },
+      {
+        title: "Prizestatistics",
+        to: "/award_statistics",
+      },
+    ],
+  },
+  {
+    id: "5",
+    title: "MediaCenter",
+    action: "menu",
+    links: [
+      {
+        title: "Awardnews",
+        to: "/award_news",
+      },
+      {
+        title: "SocialMedia",
+        to: "/social_media",
+      },
+      {
+        title: "Photoandvideogallery",
+        to: "/gallery",
+      },
+      {
+        title: "Awardpublications",
+        to: "/award_publications",
+      },
+    ],
+  },
+  {
+    id: "6",
+    title: "ContactDetails",
+    action: "route",
+    to: "/contact_us",
+  },
+  {
+    id: "7",
+    title: "AwardSponsor",
+    action: "route",
+    to: "/award_sponsor",
+  },
+];
+const iconHandler = (index) => {
+  console.log(items[index].title);
+  return new URL(`/src/assets/slide/${items[index].title}.svg`, import.meta.url)
+    .href;
+};
+</script>
+
+<style scoped>
+.sid_nav {
+  position: fixed;
+
+  bottom: 20px;
+  z-index: 99;
+  border-radius: 24px;
+  height: 90vh;
+  width: 102px;
+  background-color: #265073 !important;
+}
+.active {
+  background-color: #ffff !important;
+  color: #265073 !important;
+}
+.hover_slide:hover {
+  background-color: white !important;
+  color: #265073 !important;
+}
+
+.list_menu {
+  background-color: #265073 !important;
+  color: white;
+  padding: 10px 20px;
+  width: 250px;
+  margin: 0 10px;
+  border-radius: 20px !important;
+}
+
+.icon {
+  filter: invert(50%) sepia(28%) saturate(550%) hue-rotate(173deg)
+    brightness(92%) contrast(87%);
+}
+</style>
--- a/src/core/components/navs/SideNavMain.vue
+++ b/src/core/components/navs/SideNavMain.vue
@ -0,0 +1,48 @@
+<template>
+  <v-navigation-drawer
+    color="lightNeutral"
+    class="d-lg-none d-xl-flex"
+    height="100%"
+    v-model="isDrawerVisible"
+    overlay
+    clipped
+    temporary
+    app
+    :right="true"
+  >
+    <!--logo-->
+    <v-list>
+      <v-list-item>
+        <v-img src="@/assets/logos/vector-logo.svg" max-width="120"></v-img>
+      </v-list-item>
+      <!--TABS-->
+      <v-list-item
+        router
+        v-for="tab in tabList"
+        :key="tab.title"
+        :to="tab.routeName"
+      >
+        <v-list-item-title> {{ tab.title }}</v-list-item-title>
+      </v-list-item>
+    </v-list>
+  </v-navigation-drawer>
+</template>
+
+<script>
+import { useGlobalStore } from "@/store/GlobalStore";
+import { mapWritableState } from "pinia";
+import { bottomNavTabs } from "./TabsList";
+
+export default {
+  data() {
+    return {
+      tabList: bottomNavTabs,
+    };
+  },
+  computed: {
+    ...mapWritableState(useGlobalStore, ["isDrawerVisible"]),
+  },
+};
+</script>
+
+<style scoped></style>
--- a/src/core/components/navs/TabsList.js
+++ b/src/core/components/navs/TabsList.js
@ -0,0 +1,55 @@
+export const topNavTabs = [
+  {
+    title: "awardAgenda",
+    routeName: "award_agenda",
+    icon: "mdi-calendar",
+  },
+  {
+    title:"winners",
+    routeName: "winners",
+    icon: "mdi-trophy",
+  },
+  {
+    title: "linkedAccounts",
+    routeName: "linked_accounts",
+    icon: "mdi-link-variant",
+  },
+  {
+    title: "awardNews",
+    routeName: "award_news",
+    icon: "mdi-web",
+  },
+  {
+    title:"contactUs",
+    routeName: "contact_us",
+    icon: "mdi-chat",
+  },
+  {
+    title:"settings",
+    routeName: "settings",
+    icon: "mdi-cog-outline",
+  },
+];
+
+export const bottomNavTabs = [
+  {
+    title:"home",
+    routeName: "home",
+  },
+  {
+    title:"aboutAward",
+    routeName: "about_award",
+  },
+  {
+    title:"forms",
+    routeName: "forms",
+  },
+  {
+    title:"eventsAndWorkshops",
+    routeName: "workshops",
+  },
+  {
+    title:"achievementsFile",
+    routeName: "achievements",
+  },
+];
--- a/src/core/components/navs/TopNav.vue
+++ b/src/core/components/navs/TopNav.vue
@ -0,0 +1,175 @@
+<template>
+  <v-app-bar color="transparent" height="100" flat absolute style="z-index: 98">
+    <!--drawer button for small screens         @click="toggleDrawer()"
+-->
+
+    <v-app-bar-nav-icon class="d-lg-none absolute"></v-app-bar-nav-icon>
+
+    <v-row class="d-md-none mt-4" justify="center">
+      <v-col cols="6" md="3" align="end" align-self="center" class="d-md-none">
+        <LocaleChanger />
+      </v-col>
+      <v-col cols="5" md="3" align="center">
+        <div class="d-flex">
+          <v-btn
+            href="https://www.instagram.com/sharjaheduaward?igsh=MTF6ZDZ2Njk3MHJiaA="
+            target="_blank"
+            class="polygon-btn text-white bg-darkSecondary mx-2"
+            ><v-icon>mdi-instagram</v-icon></v-btn
+          >
+          <v-btn
+            href="https://x.com/shjspea?s=20"
+            target="_blank"
+            class="polygon-btn text-white bg-darkSecondary mx-2"
+            ><v-icon
+              ><svg
+                width="14"
+                height="14"
+                viewBox="0 0 14 14"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M11.0987 0.90625H13.1662L8.64934 6.06875L13.9631 13.0938H9.80246L6.54371 8.83313L2.81496 13.0938H0.746231L5.57746 7.57188L0.47998 0.90625H4.74621L7.69184 4.80062L11.0987 0.90625ZM10.3731 11.8563H11.5187L4.12371 2.07875H2.89434L10.3731 11.8563Z"
+                  fill="white"
+                />
+              </svg> </v-icon
+          ></v-btn>
+        </div>
+      </v-col>
+    </v-row>
+    <!--TABS-->
+    <v-tabs
+      align-tabs="center"
+      hide-slider
+      grow
+      class="py-3 d-none d-md-inline"
+    >
+      <v-row>
+        <v-col cols="6" md="3" align="center" class="d-none d-md-inline">
+          <!--TODO @click="$router.push({ name: 'home' })"-->
+          <button class="invisible-btn mx-15">
+            <v-img
+              :src="
+                $route.path === '/'
+                  ? '/private_education_authority_logo.svg'
+                  : '/private_education_authority_logo_light.svg'
+              "
+              class="mx-4"
+              width="175"
+            ></v-img>
+          </button>
+        </v-col>
+        <v-col cols="1" md="5"></v-col>
+        <v-col cols="7" md="4">
+          <v-row justify="center">
+            <v-col cols="3" align-self="center" class="d-none d-md-inline">
+              <div class="d-flex">
+                <v-btn
+                  href="https://www.instagram.com/sharjaheduaward?igsh=MTF6ZDZ2Njk3MHJiaA="
+                  target="_blank"
+                  class="polygon-btn text-white bg-darkSecondary mx-2"
+                  ><v-icon>mdi-instagram</v-icon></v-btn
+                >
+
+                <v-btn
+                  href="https://x.com/shjspea?s=20"
+                  target="_blank"
+                  class="polygon-btn text-white bg-darkSecondary mx-2"
+                  ><v-icon
+                    ><svg
+                      width="14"
+                      height="14"
+                      viewBox="0 0 14 14"
+                      fill="none"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        d="M11.0987 0.90625H13.1662L8.64934 6.06875L13.9631 13.0938H9.80246L6.54371 8.83313L2.81496 13.0938H0.746231L5.57746 7.57188L0.47998 0.90625H4.74621L7.69184 4.80062L11.0987 0.90625ZM10.3731 11.8563H11.5187L4.12371 2.07875H2.89434L10.3731 11.8563Z"
+                        fill="white"
+                      />
+                    </svg> </v-icon
+                ></v-btn>
+              </div>
+            </v-col>
+            <v-col cols="3" align-self="center" class="ms-3 d-none d-md-inline">
+              <LocaleChanger />
+            </v-col>
+            <v-col cols="5" class="d-none d-md-inline">
+              <!--TODO @click="$router.push({ name: 'home' })"-->
+              <v-img
+                @click="$router.push({ path: '/' })"
+                :src="
+                  $route.path === '/'
+                    ? '/vector-logo.svg'
+                    : '/vector-logo_light.svg'
+                "
+                class="cursor-pointer"
+                width="175"
+              ></v-img>
+            </v-col>
+          </v-row>
+        </v-col>
+      </v-row>
+    </v-tabs>
+  </v-app-bar>
+</template>
+
+<script>
+import { useGlobalStore } from "@/store/GlobalStore";
+import { mapActions } from "pinia";
+import { topNavTabs, bottomNavTabs } from "./TabsList";
+import LocaleChanger from "./components/LocaleChanger.vue";
+import { useLocale } from "vuetify";
+
+export default {
+  components: {
+    LocaleChanger,
+  },
+  mounted() {
+    window.onscroll = () => {
+      this.changeColor();
+    };
+  },
+  data() {
+    return {
+      navColor: "transparent",
+      topNavTabs: topNavTabs,
+      bottomNavTabs: bottomNavTabs,
+      locale: useLocale(),
+    };
+  },
+  methods: {
+    ...mapActions(useGlobalStore, ["changeDrawerVisibility"]),
+    toggleDrawer() {
+      this.changeDrawerVisibility();
+    },
+    changeColor() {
+      if (
+        document.body.scrollTop > 20 ||
+        document.documentElement.scrollTop > 20
+      ) {
+        this.navColor = "lightNeutral";
+      } else {
+        this.navColor = "transparent";
+      }
+    },
+  },
+};
+</script>
+
+<style>
+.v-toolbar__content,
+.v-toolbar__extension {
+  padding: 0px !important;
+}
+.rounded-ripple .v-ripple__container {
+  border-radius: 24px;
+}
+.rounded-ripple:hover .v-ripple__container {
+  border-radius: 24px;
+}
+.v-tabs__item:hover {
+  background-color: transparent !important;
+}
+</style>
--- a/src/core/components/navs/components/LocaleChanger.vue
+++ b/src/core/components/navs/components/LocaleChanger.vue
@ -0,0 +1,74 @@
+<script setup>
+import { useGlobalStore } from "@/store/GlobalStore";
+import { useI18n } from "vue-i18n";
+import { useRouter } from "vue-router";
+
+const globalStore = useGlobalStore();
+const { locale } = useI18n();
+const router = useRouter();
+
+function changeCurrentLocale(newLocale) {
+  locale.value = newLocale;
+  globalStore.changeCurrentLocale(newLocale);
+  router.go();
+}
+</script>
+
+<template>
+  <v-menu offset-y bottom close-on-click>
+    <template v-slot:activator="{ props }">
+      <button>
+        <v-row
+          style="max-width: 150px"
+          class="text-white font-weight-light link"
+          v-bind="props"
+          align="center"
+        >
+          <v-col cols="8" class="text-subtitle-2" style="color: #2e3947"
+            >{{ globalStore.getCurrentLocale == "ar" ? "العربية" : "English" }}
+          </v-col>
+          <v-col cols="2">
+            <v-icon
+              color="#2E3947
+"
+              >mdi-web</v-icon
+            >
+          </v-col>
+        </v-row>
+      </button>
+    </template>
+
+    <v-list class="bg-light text-darkSecondary rounded-xl">
+      <v-list-item link @click="changeCurrentLocale('en')">
+        <v-list-item-title>
+          <v-row align="center">
+            <v-col cols="3">
+              <v-img
+                src="@/assets/flags/usa.svg"
+                class="mx-2 rounded-xl"
+                width="30"
+              ></v-img>
+            </v-col>
+            <v-col cols="9" class="text-subtitle-2"> English </v-col>
+          </v-row>
+        </v-list-item-title>
+      </v-list-item>
+      <v-list-item link @click="changeCurrentLocale('ar')">
+        <v-list-item-title>
+          <v-row align="center">
+            <v-col cols="3">
+              <v-img
+                src="@/assets/flags/uae.svg"
+                class="mx-2 rounded-xl"
+                width="30"
+              ></v-img>
+            </v-col>
+            <v-col cols="9" class="text-subtitle-2">
+              Arabic (اللغة العربية)
+            </v-col>
+          </v-row>
+        </v-list-item-title>
+      </v-list-item>
+    </v-list>
+  </v-menu>
+</template>
--- a/src/core/components/notifications/NotificationAlert.vue
+++ b/src/core/components/notifications/NotificationAlert.vue
@ -0,0 +1,32 @@
+<script setup>
+import { useSnackbarStore } from "@/store/SnackbarStore";
+import { storeToRefs } from "pinia";
+
+const store = useSnackbarStore();
+const { isSnackbarVisible, snackbarOptions, message, icon } =
+  storeToRefs(store);
+</script>
+<template>
+  <VSnackbar
+    v-model="isSnackbarVisible"
+    v-bind="snackbarOptions"
+    location="top end"
+    transition="scroll-y-reverse-transition"
+    closable
+  >
+    <div class="d-flex gap-2 align-center">
+      <VIcon size="25" :icon="icon" />
+      <div>
+        {{ message }}
+      </div>
+    </div>
+    <template #actions>
+      <VBtn
+        size="x-small"
+        color="white"
+        icon="mdi-close"
+        @click="isSnackbarVisible = false"
+      />
+    </template>
+  </VSnackbar>
+</template>
--- a/src/core/components/pagination/EmptyPaginationCollection.vue
+++ b/src/core/components/pagination/EmptyPaginationCollection.vue
@ -0,0 +1,27 @@
+<template>
+  <v-row
+    justify="center"
+    class="mb-5"
+    v-if="paginatedCollection.collection.length == 0 && !isLoading"
+  >
+    <!-- //TODO replace with an illustration -->
+    {{ $t('noResultsFound') }}
+  </v-row>
+</template>
+
+<script>
+import { mapState } from "pinia";
+import { useGlobalStore } from "@/store/GlobalStore";
+import BasePaginatedCollection from "@/core/classes/base/BasePaginatedCollection";
+
+export default {
+  props: {
+    paginatedCollection: BasePaginatedCollection,
+  },
+  computed: {
+    ...mapState(useGlobalStore, ["isLoading"]),
+  },
+};
+</script>
+
+<style></style>
--- a/src/core/components/pagination/PaginationNextButton.vue
+++ b/src/core/components/pagination/PaginationNextButton.vue
@ -0,0 +1,33 @@
+<template>
+  <v-btn
+    v-if="paginatedCollection.collection.length != 0 && !isLoading"
+    class="mt-10"
+    color="accent"
+    :disabled="paginatedCollection.isLastPage"
+    rounded
+    elevation="8"
+    @click="onclick()"
+    v-bind="$attrs"
+  >
+    <v-icon>mdi-arrow-left</v-icon>
+   {{ $t('next') }}
+  </v-btn>
+</template>
+
+<script>
+import { mapState } from "pinia";
+import { useGlobalStore } from "@/store/GlobalStore";
+import BasePaginatedCollection from "@/core/classes/base/BasePaginatedCollection";
+
+export default {
+  props: {
+    paginatedCollection: BasePaginatedCollection,
+    onclick: Function,
+  },
+  computed: {
+    ...mapState(useGlobalStore, ["isLoading"]),
+  },
+};
+</script>
+
+<style></style>
--- a/src/core/components/pagination/PaginationPreviousButton.vue
+++ b/src/core/components/pagination/PaginationPreviousButton.vue
@ -0,0 +1,33 @@
+<template>
+  <v-btn
+    v-if="paginatedCollection.currentPage > 1 && !isLoading"
+    class="mt-10"
+    color="lightNeutral"
+    :disabled="paginatedCollection.currentPage == 1"
+    rounded
+    elevation="8"
+    @click="onclick()"
+    v-bind="$attrs"
+  >
+    <v-icon>mdi-arrow-right</v-icon>
+    {{ $t('previous') }}
+  </v-btn>
+</template>
+
+<script>
+import { mapState } from "pinia";
+import { useGlobalStore } from "@/store/GlobalStore";
+import BasePaginatedCollection from "@/core/classes/base/BasePaginatedCollection";
+
+export default {
+  props: {
+    paginatedCollection: BasePaginatedCollection,
+    onclick: Function,
+  },
+  computed: {
+    ...mapState(useGlobalStore, ["isLoading"]),
+  },
+};
+</script>
+
+<style></style>
--- a/src/core/composables/DateTime.js
+++ b/src/core/composables/DateTime.js
@ -0,0 +1,7 @@
+export function isTimestampBetween(timestamp, startTimestamp, endTimestamp) {
+  const startTime = new Date(startTimestamp).getTime();
+  const endTime = new Date(endTimestamp).getTime();
+  const targetTime = new Date(timestamp).getTime();
+
+  return targetTime >= startTime && targetTime <= endTime;
+}
--- a/src/core/composables/formatters.js
+++ b/src/core/composables/formatters.js
@ -0,0 +1,106 @@
+export const isToday = (date) => {
+  const today = new Date();
+
+  return (
+    /* eslint-disable operator-linebreak */
+    date.getDate() === today.getDate() &&
+    date.getMonth() === today.getMonth() &&
+    date.getFullYear() === today.getFullYear()
+    /* eslint-enable */
+  );
+};
+
+export const avatarText = (value) => {
+  if (!value) return "";
+  const nameArray = value.split(" ");
+
+  return nameArray.map((word) => word.charAt(0).toUpperCase()).join("");
+};
+// TODO: Try to implement this: https://twitter.com/fireship_dev/status/1565424801216311297
+export const kFormatter = (num) => {
+  const regex = /\B(?=(\d{3})+(?!\d))/g;
+
+  return Math.abs(num) > 9999
+    ? `${Math.sign(num) * +(Math.abs(num) / 1000).toFixed(1)}k`
+    : Math.abs(num).toFixed(0).replace(regex, ",");
+};
+
+/**
+ * Format and return date in Humanize format
+ * Intl docs: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/format
+ * Intl Constructor: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat
+ * @param {String} value date to format
+ * @param {Intl.DateTimeFormatOptions} formatting Intl object to format with
+ */
+export const formatDate = (
+  value,
+  formatting = { month: "short", day: "numeric", year: "numeric" }
+) => {
+  if (!value) return value;
+
+  return new Intl.DateTimeFormat("en-US", formatting).format(new Date(value));
+};
+
+/**
+ * Return short human friendly month representation of date
+ * Can also convert date to only time if date is of today (Better UX)
+ * @param {String} value date to format
+ * @param {Boolean} toTimeForCurrentDay Shall convert to time if day is today/current
+ */
+export const formatDateToMonthShort = (value, toTimeForCurrentDay = true) => {
+  const date = new Date(value);
+  let formatting = { month: "short", day: "numeric" };
+
+  if (toTimeForCurrentDay && isToday(date))
+    formatting = { hour: "numeric", minute: "numeric" };
+
+  return new Intl.DateTimeFormat("en-US", formatting).format(new Date(value));
+};
+/**
+ * Return short human friendly Time in 12 Hour representation
+ * @param {String} value timestamp to format
+ */
+export const formatTimestampTo12HTime = (value) => {
+  const date = new Date(value);
+
+  const timeFormatter = new Intl.DateTimeFormat("en-US", {
+    hour: "numeric",
+    minute: "numeric",
+    hour12: true,
+  });
+
+  const formattedTime = timeFormatter.format(date);
+
+  return formattedTime;
+};
+
+export const formatDateTime = (value) => {
+  const datetime = new Date(value); // current datetime
+
+  const options = {
+    year: "numeric",
+    month: "long",
+    day: "numeric",
+    hour: "numeric",
+    minute: "numeric",
+    hour12: true,
+  };
+  return datetime.toLocaleString("en-US", options);
+};
+export const formateToDate = (value) => {
+  const datetime = new Date(value); // current datetime
+
+  const year = datetime.getFullYear();
+  const month = String(datetime.getMonth() + 1).padStart(2, "0");
+  const day = String(datetime.getDate()).padStart(2, "0");
+  return `${year}-${month}-${day}`;
+};
+export const formatToYearMonth = (value) => {
+  const datetime = new Date(value); // current datetime
+
+  const options = {
+    year: "numeric",
+    month: "long",
+  };
+  return datetime.toLocaleString("en-US", options);
+};
--- a/src/core/composables/validators.js
+++ b/src/core/composables/validators.js
@ -0,0 +1,137 @@
+import { translate } from '@/plugins/i18n'
+
+// 👉 IsEmpty
+export const isEmpty = (value) => {
+  if (value === null || value === undefined || value === '')
+    return true
+
+  return !!(Array.isArray(value) && value.length === 0)
+}
+// 👉 IsNullOrUndefined
+export const isNullOrUndefined = (value) => {
+  return value === null || value === undefined
+}
+
+// 👉 IsEmptyArray
+export const isEmptyArray = (arr) => {
+  return Array.isArray(arr) && arr.length === 0
+}
+
+// 👉 Required Validator
+export const requiredValidator = (value) => {
+  if (isNullOrUndefined(value) || isEmptyArray(value) || value === false)
+    return translate('validation.requiredField')
+
+  return !!String(value).trim().length || translate('validation.requiredField')
+}
+
+// 👉 Email Validator
+export const emailValidator = (value) => {
+  if (isEmpty(value))
+    return true
+
+  const re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
+
+  if (Array.isArray(value))
+    return value.every(val => re.test(String(val))) || translate('validation.emailField')
+
+  return re.test(String(value)) || translate('validation.emailField')
+}
+
+// 👉 Password Validator
+export const passwordValidator = (password) => {
+  const regExp = /(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[!@#$%&*()]).{8,}/
+
+  const validPassword = regExp.test(password)
+
+  return (
+    // eslint-disable-next-line operator-linebreak
+    validPassword ||
+    translate('validation.passwordField')
+  )
+}
+
+// 👉 Confirm Password Validator
+export const confirmedValidator = (value, target) =>
+
+  value === target || translate('validation.confirmedField')
+
+// 👉 Between Validator
+export const betweenValidator = (value, min, max) => {
+  const valueAsNumber = Number(value)
+
+  return (Number(min) <= valueAsNumber && Number(max) >= valueAsNumber)
+  || translate('validation.betweenField', { min, max })
+}
+
+// 👉 Integer Validator
+export const integerValidator = (value) => {
+  if (isEmpty(value))
+    return true
+
+  if (Array.isArray(value))
+    return value.every(val => /^-?[0-9]+$/.test(String(val))) || translate('validation.integerField')
+
+  return /^-?[0-9]+$/.test(String(value)) || translate('validation.integerField')
+}
+
+// 👉 Regex Validator
+export const regexValidator = (value, regex) => {
+  if (isEmpty(value))
+    return true
+
+  let regeX = regex
+  if (typeof regeX === 'string')
+    regeX = new RegExp(regeX)
+
+  if (Array.isArray(value))
+    return value.every(val => regexValidator(val, regeX))
+
+  return regeX.test(String(value)) || translate('validation.regexField')
+}
+
+// 👉 Alpha Validator
+export const alphaValidator = (value) => {
+  if (isEmpty(value))
+    return true
+
+  return /^[A-Z]*$/i.test(String(value)) || translate('validation.alphaField')
+}
+
+// 👉 URL Validator
+export const urlValidator = (value) => {
+  if (isEmpty(value))
+    return true
+
+  const re = /^(http[s]?:\/\/){0,1}(www\.){0,1}[a-zA-Z0-9\.\-]+\.[a-zA-Z]{2,5}[\.]{0,1}/
+
+  return re.test(String(value)) || translate('validation.urlField')
+}
+
+// 👉 Time Validator
+export const timeValidator = (value) => {
+  if (isEmpty(value))
+    return true
+
+  const re = /^(?:[01]\d|2[0-3]):[0-5]\d$/
+
+  return re.test(String(value)) || translate('validation.timeField')
+}
+
+// 👉 Length Validator
+export const lengthValidator = (value, length) => {
+  if (isEmpty(value))
+    return true
+
+  return String(value).length === length || translate('validation.lengthedField', { length })
+}
+
+// 👉 Alpha-dash Validator
+export const alphaDashValidator = (value) => {
+  if (isEmpty(value))
+    return true
+
+  const valueAsString = String(value)
+
+  return /^[0-9A-Z_-]*$/i.test(valueAsString) || translate('validation.alphaDashField')
+}
--- a/src/core/layouts/default/AppBar.vue
+++ b/src/core/layouts/default/AppBar.vue
@ -0,0 +1,133 @@
+<template>
+  <v-app-bar app color="white" flat class="py-1">
+    <v-row justify="center" class="ma-0">
+      <v-col cols="12" lg="11" class="pa-0">
+        <v-row class="ma-0">
+          <v-col cols="2" md="2" class="pa-0 d-flex align-center justify-center"
+            ><v-toolbar-title class="d-flex justify-center">
+              <img
+                src="@/assets/logo.svg"
+                alt="Logo"
+                height="40"
+              /> </v-toolbar-title
+          ></v-col>
+          <v-col cols="7" class="w-100 pa-0 d-none d-md-flex align-center">
+            <v-tabs
+              bg-color="transparent"
+              class="pa-0 px-5 w-100"
+              align-tabs="center"
+              slider-color="transparent"
+              height="40"
+              center-active
+            >
+              <v-tab
+                :to="link.path"
+                v-for="link in links"
+                :key="link"
+                class="py-0 rounded-xl"
+                selected-class="link-active-class"
+              >
+                {{ link.name }}
+              </v-tab>
+            </v-tabs>
+          </v-col>
+          <v-col
+            class="d-none d-md-flex pa-0 align-center justify-center h-100"
+            cols="3"
+          >
+            <v-text-field
+              v-model="search"
+              placeholder="Search Products..."
+              hide-details
+              rounded="xl"
+              variant="solo-filled"
+            >
+              <template v-slot:append-inner>
+                <v-btn
+                  color="white"
+                  size="small"
+                  class="bg-primary"
+                  icon="mdi-magnify"
+                ></v-btn>
+              </template>
+            </v-text-field>
+          </v-col>
+        </v-row>
+      </v-col>
+    </v-row>
+
+    <!-- Menu button for small screens -->
+    <v-app-bar-nav-icon
+      class="d-flex d-md-none"
+      @click="drawer = !drawer"
+    ></v-app-bar-nav-icon>
+  </v-app-bar>
+
+  <!-- Drawer for small screens -->
+  <v-navigation-drawer v-model="drawer" app temporary>
+    <v-list>
+      <v-list-item>
+        <v-list-item-title>Homeee</v-list-item-title>
+      </v-list-item>
+      <v-list-item>
+        <v-list-item-title>About</v-list-item-title>
+      </v-list-item>
+      <v-list-item>
+        <v-list-item-title>Contact</v-list-item-title>
+      </v-list-item>
+      <v-list-item class="">
+        <v-text-field
+          v-model="search"
+          append-icon="mdi-magnify"
+          label="Search"
+          single-line
+          hide-details
+        ></v-text-field>
+      </v-list-item>
+    </v-list>
+  </v-navigation-drawer>
+</template>
+
+<script setup>
+import { ref } from "vue";
+const drawer = ref(false);
+const links = [
+  {
+    name: "Home",
+    path: "/",
+  },
+  {
+    name: "Products",
+    path: "/products",
+  },
+  {
+    name: "Distributors",
+    path: "/distributors",
+  },
+  {
+    name: "Services",
+    path: "/services",
+  },
+  {
+    name: "About",
+    path: "/about",
+  },
+  {
+    name: "Contact",
+    path: "/contact",
+  },
+];
+</script>
+
+<style scoped>
+.links {
+  display: flex;
+  gap: 16px;
+}
+.link-active-class {
+  background: #e9ae0c4d;
+}
+.v-field {
+  box-shadow: 3.33px 8.33px 16.67px 0px #00000021 !important;
+}
+</style>
--- a/src/core/layouts/default/AppFooter.vue
+++ b/src/core/layouts/default/AppFooter.vue
@ -0,0 +1,125 @@
+<template>
+  <v-footer color="#E1E5EA" class="pa-0">
+    <v-row justify="center" class="w-100 ma-0">
+      <v-col cols="11">
+        <v-card-title
+          class="w-100 py-6"
+          style="border-bottom: 1px solid rgb(0 0 0 / 8%)"
+        >
+          <div style="width: 100px">
+            <v-img src="@/assets/logo.svg"> </v-img>
+          </div>
+        </v-card-title>
+        <v-list
+          class="px-0 py-3 bg-transparent d-flex flex-wrap align-start justify-space-between"
+        >
+          <v-list-item class="px-0">
+            <v-list-item-title
+              class="py-3"
+              v-for="(link, index) in links"
+              :key="index"
+            >
+              <v-btn :to="link.path" variant="text">{{ link.name }}</v-btn>
+            </v-list-item-title>
+          </v-list-item>
+
+          <v-list-item class="px-0">
+            <h4 class="px-5 py-3">Blogs</h4>
+            <v-list-item-title class="py-3 px-0">
+              <v-btn to="/automation" variant="text">Automation</v-btn>
+            </v-list-item-title>
+            <v-list-item-title class="py-3 px-0">
+              <v-btn to="/lighting" variant="text">Lighting</v-btn>
+            </v-list-item-title>
+          </v-list-item>
+          <v-list-item class="px-0">
+            <h4 class="px-5 py-3">Documents</h4>
+
+            <v-list-item-title class="py-3 px-0">
+              <v-btn to="/quality-certificates" variant="text"
+                >Quality Certificates</v-btn
+              >
+            </v-list-item-title>
+          </v-list-item>
+          <v-list-item>
+            <h4 class="mb-2 py-3">Contact</h4>
+            <v-list-item-title class="py-3">
+              <v-icon class="text-accent mr-2">mdi-map-marker</v-icon>
+              Piazza Napoleone, Lucca, Tuscany
+            </v-list-item-title>
+            <v-list-item-title class="py-3">
+              <v-icon class="text-accent mr-2">mdi-phone</v-icon>
+              +39 346 368 5708
+            </v-list-item-title>
+            <v-list-item-title class="py-3">
+              <v-icon class="text-accent mr-2">mdi-email</v-icon>
+              italiainlimo@gmail.com
+            </v-list-item-title>
+          </v-list-item>
+          <v-list-item
+            ><h4 class="py-3">Social Media</h4>
+            <v-card-actions class="px-0 ga-2">
+              <v-btn
+                variant="text"
+                color="white"
+                class="bg-accent"
+                icon="mdi-twitter"
+              ></v-btn>
+              <v-btn
+                variant="text"
+                color="white"
+                class="bg-accent"
+                icon="mdi-facebook"
+              ></v-btn>
+              <v-btn
+                variant="text"
+                color="white"
+                class="bg-accent"
+                icon="mdi-instagram"
+              ></v-btn>
+            </v-card-actions>
+          </v-list-item>
+        </v-list>
+        <v-card-title
+          style="border-top: 1px solid rgb(0 0 0 / 8%)"
+          class="d-flex justify-space-between align-center"
+        >
+          <h5 class="text-body-1">© MNS – All Rights Reserved</h5>
+          <v-card-actions>
+            <v-btn to="/terms-and-conditions" variant="text"
+              >Terms and Conditions</v-btn
+            >
+            <v-btn to="/privacy-policy" variant="text">Privacy Policy</v-btn>
+          </v-card-actions>
+        </v-card-title>
+      </v-col>
+    </v-row>
+  </v-footer>
+</template>
+
+<script setup>
+const links = [
+  {
+    name: "Home",
+    path: "/",
+  },
+  {
+    name: "Products",
+    path: "/products",
+  },
+  {
+    name: "Distributors",
+    path: "/distributors",
+  },
+  {
+    name: "Services",
+    path: "/services",
+  },
+  {
+    name: "About",
+    path: "/about",
+  },
+];
+</script>
+
+<style scoped></style>
--- a/src/core/layouts/default/Default.vue
+++ b/src/core/layouts/default/Default.vue
@ -0,0 +1,19 @@
+<template>
+  <v-app>
+    <DefaultSystemBar v-if="mdAndUp" />
+    <default-bar />
+    <default-view />
+    <DefaultFooter />
+    <LoadingProgress></LoadingProgress>
+  </v-app>
+</template>
+
+<script setup>
+import DefaultSystemBar from "./systemBar.vue";
+import DefaultBar from "./AppBar.vue";
+import DefaultView from "./View.vue";
+import DefaultFooter from "./AppFooter.vue";
+import LoadingProgress from "@/core/components/loader/LoadingProgress";
+import { useDisplay } from "vuetify";
+const { mdAndUp } = useDisplay();
+</script>
--- a/src/core/layouts/default/View.vue
+++ b/src/core/layouts/default/View.vue
@ -0,0 +1,9 @@
+<template>
+  <v-main>
+    <router-view />
+  </v-main>
+</template>
+
+<script setup>
+  //
+</script>
--- a/src/core/layouts/default/systemBar.vue
+++ b/src/core/layouts/default/systemBar.vue
@ -0,0 +1,40 @@
+<template>
+  <v-system-bar height="40" class="bg-primary">
+    <v-row class="ma-0" justify="center">
+      <v-col cols="11" class="d-flex justify-space-between pa-0">
+        <section class="d-flex align-center">
+          <span class="me-2 text-body-2"
+            ><v-icon>mdi-map-marker-outline</v-icon></span
+          >
+          <span class="text-white text-body-2"
+            >Esenşehir Mh. Güneyli Sk. No:13 Ümraniye/İSTANBUL</span
+          >
+        </section>
+        <section class="d-flex ga-5">
+          <!-- phone -->
+          <div>
+            <span class="me-2 text-body-2"><v-icon>mdi-phone</v-icon></span>
+            <span class="text-white text-body-2">+90 (216) 314 59 00</span>
+          </div>
+          <!-- email -->
+          <div>
+            <span class="me-2 text-body-2"><v-icon>mdi-email</v-icon></span>
+            <span class="text-white text-body-2">
+              <a href="mailto:  " class="text-body-2">
+                <span class="text-white text-body-2">
+                  botek@botekotomasyon.com
+                </span>
+              </a>
+            </span>
+          </div>
+        </section>
+      </v-col>
+    </v-row>
+  </v-system-bar>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style scoped></style>
--- a/src/main.js
+++ b/src/main.js
@ -0,0 +1,20 @@
+/**
+ * main.js
+ *
+ * Bootstraps Vuetify and other plugins then mounts the App`
+ */
+
+// Components
+import App from './App.vue'
+
+// Composables
+import { createApp } from 'vue'
+
+// Plugins
+import { registerPlugins } from '@/plugins'
+
+const app = createApp(App)
+
+registerPlugins(app)
+
+app.mount('#app')
--- a/src/modules/About/components/Introduction.vue
+++ b/src/modules/About/components/Introduction.vue
@ -0,0 +1,224 @@
+<template>
+  <v-sheet color="transparent" class="py-9">
+    <v-row class="ma-0">
+      <v-col cols="12" md="6">
+        <v-card variant="text" max-width="517">
+          <v-card-title>
+            <h5 class="text-primary font-weight-regular text-h6">WHO ARE WE</h5>
+          </v-card-title>
+          <v-card-title
+            ><h4 class="text-h4 text-wrap">
+              We assist individuals with product solutions for industrial
+              automation.
+            </h4>
+          </v-card-title>
+          <v-card-subtitle>
+            <p class="text-wrap text-body-1">
+              MNS specializes in manufacturing and supplying electrical products
+              and low voltage lighting products. They provide reliable products
+              and end-to-end solutions to customers all over the world.
+            </p>
+          </v-card-subtitle>
+        </v-card>
+        <v-sheet class="d-flex flex-column ga-5 my-9">
+          <v-card
+            v-for="n in 2"
+            :key="n"
+            variant="text"
+            class="rounded-xl"
+            max-width="400"
+            style="box-shadow: 4px 10px 30px 0px #0000000f"
+          >
+            <template v-slot:title>
+              <v-card-title>
+                <h4 class="text-h6 font-weight-regular text-primary">value</h4>
+              </v-card-title>
+            </template>
+            <template v-slot:subtitle>
+              <v-card-subtitle style="opacity: 1" class="mt-1">
+                <p class="text-wrap text-body-1 font-weight-regular">
+                  What makes our services indispensable are our services: we are
+                  with you at any time
+                </p>
+              </v-card-subtitle>
+            </template>
+            <template v-slot:prepend>
+              <v-icon size="x-large" class="mr-2 text-accent">mdi-phone</v-icon>
+            </template>
+          </v-card>
+        </v-sheet>
+      </v-col>
+      <v-col cols="12" md="6" class="pa-0 position-relative pt-16">
+        <v-row class="ma-0 h-100">
+          <v-col class="h-100 pa-0">
+            <v-hover>
+              <template v-slot="{ isHovering, props }">
+                <v-card
+                  variant="text"
+                  v-bind="props"
+                  class="w-100 h-100 d-flex align-end"
+                >
+                  <v-img
+                    style="height: 90%"
+                    src="@/assets/about/about_1.png"
+                    :class="
+                      isHovering ? 'animate__animated animate__pulse' : ''
+                    "
+                  ></v-img>
+                </v-card>
+              </template>
+            </v-hover>
+          </v-col>
+          <v-col class="d-flex flex-column justify-center pa-0">
+            <v-hover>
+              <template v-slot="{ isHovering, props }">
+                <v-card
+                  v-bind="props"
+                  variant="text"
+                  class="w-100 position-relative"
+                  style="z-index: 1"
+                >
+                  <v-img
+                    :class="
+                      isHovering ? 'animate__animated animate__pulse' : ''
+                    "
+                    src="@/assets/about/about_2.png"
+                  ></v-img>
+                </v-card>
+              </template>
+            </v-hover>
+
+            <v-hover>
+              <template v-slot="{ isHovering, props }">
+                <v-card
+                  v-bind="props"
+                  variant="text"
+                  class="w-100 position-relative"
+                >
+                  <v-img
+                    :class="
+                      isHovering ? 'animate__animated animate__pulse' : ''
+                    "
+                    style="z-index: 1"
+                    src="@/assets/about/about_3.png"
+                  ></v-img>
+                  <div
+                    style="
+                      width: 100px;
+                      position: absolute;
+                      left: 0;
+                      bottom: 0;
+                      z-index: 0;
+                    "
+                  >
+                    <v-img
+                      class="gear"
+                      height="100"
+                      src="@/assets/decorations/gear.svg"
+                    ></v-img>
+                  </div>
+                </v-card>
+              </template>
+            </v-hover>
+          </v-col>
+        </v-row>
+        <div class="decor">
+          <v-img
+            class="decor_anmated"
+            height="400"
+            src="@/assets/decorations/decore_1.svg"
+          ></v-img>
+        </div>
+      </v-col>
+    </v-row>
+  </v-sheet>
+</template>
+
+<script setup></script>
+
+<style scoped>
+.decor {
+  width: 400px;
+  position: absolute;
+  left: 50%;
+  top: -50px;
+  z-index: 0;
+  transform: translateX(-50%);
+  transition: 1s;
+}
+.decor_anmated {
+  animation: rotate_decore 30s linear infinite;
+  z-index: 0;
+}
+
+@keyframes rotate_decore {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+.gear {
+  animation: rotate 5s linear infinite;
+}
+
+@keyframes rotate {
+  0% {
+    transform: rotate(0deg);
+  }
+  40% {
+    transform: rotate(360deg);
+  }
+  50% {
+    transform: rotate(360deg);
+  }
+  90% {
+    transform: rotate(360deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+.animate__pulse {
+  -webkit-animation-name: pulse;
+  animation-name: pulse;
+  -webkit-animation-timing-function: ease-in-out;
+  animation-timing-function: ease-in-out;
+}
+@-webkit-keyframes pulse {
+  from {
+    -webkit-transform: scale3d(1, 1, 1);
+    transform: scale3d(1, 1, 1);
+  }
+
+  50% {
+    -webkit-transform: scale3d(1.05, 1.05, 1.05);
+    transform: scale3d(1.05, 1.05, 1.05);
+  }
+
+  to {
+    -webkit-transform: scale3d(1, 1, 1);
+    transform: scale3d(1.05, 1.05, 1.05) !important;
+  }
+}
+@keyframes pulse {
+  from {
+    -webkit-transform: scale3d(1, 1, 1);
+    transform: scale3d(1, 1, 1);
+  }
+
+  50% {
+    -webkit-transform: scale3d(1.05, 1.05, 1.05);
+    transform: scale3d(1.05, 1.05, 1.05);
+  }
+
+  to {
+    -webkit-transform: scale3d(1.05, 1.05, 1.05);
+
+    transform: scale3d(1.05, 1.05, 1.05) !important;
+  }
+}
+</style>
--- a/src/modules/About/components/aTeamMember.vue
+++ b/src/modules/About/components/aTeamMember.vue
@ -0,0 +1,43 @@
+<template>
+  <v-hover>
+    <template v-slot="{ isHovering, props }">
+      <v-card
+        width="200"
+        v-bind="props"
+        variant="text"
+        class="pa-0 cursor-pointer"
+      >
+        <v-img
+          style="border-radius: 120px 40px 40px 40px"
+          cover
+          height="280"
+          width="100%"
+          class="mb-1"
+          :class="isHovering ? 'slide' : ''"
+          src="/team/aTeamMember_1.jpg"
+        ></v-img>
+        <v-card-title class="text-center pb-0">
+          <h5>Brendon M</h5>
+        </v-card-title>
+        <v-card-subtitle class="text-center" style="opacity: 0.7s">
+          <p
+            class="text-primary font-weight-medium"
+            :class="isHovering ? 'text-accent' : ''"
+            style="transition: 1s"
+          >
+            CEO & Founder
+          </p>
+        </v-card-subtitle>
+      </v-card>
+    </template>
+  </v-hover>
+</template>
+
+<script setup></script>
+
+<style scoped>
+.slide {
+  transform: translateY(10px);
+  transition: 0.8s;
+}
+</style>
--- a/src/modules/About/components/ourTeam.vue
+++ b/src/modules/About/components/ourTeam.vue
@ -0,0 +1,28 @@
+<template>
+  <v-sheet>
+    <v-card variant="text" color="transparent" class="py-5">
+      <v-card-title class="text-center py-0">
+        <h6
+          class="text-h6 text-primary font-weight-regular"
+          style="letter-spacing: 3px !important"
+        >
+          Introduce yourself to
+        </h6>
+      </v-card-title>
+      <v-card-title class="text-center py-0 text-black">
+        <h4 class="text-h3 font-weight-medium">Our Team of Experts</h4>
+      </v-card-title>
+    </v-card>
+    <v-sheet class="d-flex flex-wrap justify-space-around py-10">
+      <div v-for="n in 5" :key="n">
+        <aTeamMember />
+      </div>
+    </v-sheet>
+  </v-sheet>
+</template>
+
+<script setup>
+import aTeamMember from "./aTeamMember.vue";
+</script>
+
+<style scoped></style>
--- a/src/modules/About/components/trustedBy.vue
+++ b/src/modules/About/components/trustedBy.vue
@ -0,0 +1,122 @@
+<template>
+  <v-sheet class="py-15">
+    <v-card-subtitle class="text-center pb-0" style="opacity: 1">
+      <p class="text-body-1">Trusted by 100+ Companies across the globe!</p>
+    </v-card-subtitle>
+    <v-sheet>
+      <swiper-container
+        class="mt-5"
+        slides-per-view="auto"
+        mousewheel-force-to-axis="true"
+        space-between="50"
+        autoplay-delay="4000"
+        autoplay-disable-on-interaction="false"
+      >
+        <v-hover
+          v-for="(item, index) in 8"
+          :key="item"
+          class="bg-red"
+          style="overflow: visible"
+        >
+          <template v-slot="{ isHovering, props }">
+            <swiper-slide
+              style="cursor: pointer; z-index: 2"
+              class="align-center d-flex"
+              :style="smAndUp ? 'width : 200px' : '50%'"
+              v-bind="props"
+            >
+              <v-card
+                variant="text"
+                width="100%"
+                height="100"
+                class="d-flex align-center"
+              >
+                <v-img
+                  style="transition: 0.5s !important"
+                  :class="
+                    isHovering
+                      ? 'animate__animated animate__pulse'
+                      : 'filter_black'
+                  "
+                  :height="50"
+                  src="@/assets/logo.svg"
+                ></v-img>
+              </v-card>
+            </swiper-slide>
+          </template>
+        </v-hover>
+      </swiper-container>
+    </v-sheet>
+  </v-sheet>
+</template>
+
+<script setup>
+import { useDisplay } from "vuetify";
+const { smAndUp } = useDisplay();
+</script>
+
+<style scoped>
+.filter_black {
+  filter: brightness(0) saturate(100%);
+}
+@keyframes rotate {
+  0% {
+    transform: rotate(0deg);
+  }
+  40% {
+    transform: rotate(360deg);
+  }
+  50% {
+    transform: rotate(360deg);
+  }
+  90% {
+    transform: rotate(360deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+.filter_black {
+  filter: brightness(0) saturate(100%);
+}
+
+.animate__pulse {
+  -webkit-animation-name: pulse;
+  animation-name: pulse;
+  -webkit-animation-timing-function: ease-in-out;
+  animation-timing-function: ease-in-out;
+}
+@-webkit-keyframes pulse {
+  from {
+    -webkit-transform: scale3d(1, 1, 1);
+    transform: scale3d(1, 1, 1);
+  }
+
+  50% {
+    -webkit-transform: scale3d(1.05, 1.05, 1.05);
+    transform: scale3d(1.05, 1.05, 1.05);
+  }
+
+  to {
+    -webkit-transform: scale3d(1, 1, 1);
+    transform: scale3d(1.05, 1.05, 1.05) !important;
+  }
+}
+@keyframes pulse {
+  from {
+    -webkit-transform: scale3d(1, 1, 1);
+    transform: scale3d(1, 1, 1);
+  }
+
+  50% {
+    -webkit-transform: scale3d(1.3, 1.3, 1.3);
+    transform: scale3d(1.3, 1.3, 1.3);
+  }
+
+  to {
+    -webkit-transform: scale3d(1.3, 1.3, 1.3);
+
+    transform: scale3d(1.3, 1.3, 1.3) !important;
+  }
+}
+</style>
--- a/src/modules/About/pages/index.vue
+++ b/src/modules/About/pages/index.vue
@ -0,0 +1,33 @@
+<template>
+  <v-sheet color="transparent">
+    <breadcrumbs :breadcrumbsItems="items" />
+    <v-row justify="center">
+      <v-col cols="11">
+        <introduction />
+        <ourTeam />
+        <trustedBy />
+      </v-col>
+    </v-row>
+  </v-sheet>
+</template>
+
+<script setup>
+import breadcrumbs from "@/core/components/breadcrumbs.vue";
+import introduction from "../components/Introduction";
+import ourTeam from "../components/ourTeam.vue";
+import trustedBy from "../components/trustedBy.vue";
+const items = [
+  {
+    title: "Home",
+    disabled: false,
+    href: "/",
+  },
+  {
+    title: "About",
+    disabled: true,
+    href: "/about",
+  },
+];
+</script>
+
+<style scoped></style>
--- a/src/modules/About/routes/index.routes.js
+++ b/src/modules/About/routes/index.routes.js
@ -0,0 +1,14 @@
+import DefaultLayout from "@/core/layouts/default/Default.vue";
+import About from "../pages/index.vue";
+export default {
+  path: "/About",
+  component: DefaultLayout,
+  children: [
+    {
+      path: "",
+      name: "About",
+      component: About,
+      // meta: { title: translate("") },
+    },
+  ],
+};
--- a/src/modules/About/services/index.api.js
+++ b/src/modules/About/services/index.api.js
@ -0,0 +1 @@
+export const api = `/`;
--- a/src/modules/About/services/indexService.js
+++ b/src/modules/About/services/indexService.js
@ -0,0 +1,5 @@
+import BaseService from "@/core/classes/base/BaseService";
+import { api } from "./index.api";
+import Client from "@/core/classes/client/Client";
+
+export default class CategoriesService extends BaseService {}
--- a/src/modules/About/store/indexStore.js
+++ b/src/modules/About/store/indexStore.js
@ -0,0 +1,11 @@
+import { defineStore } from "pinia";
+import BaseStore from "@/core/classes/base/BaseStore";
+import Service from "../services/indexService";
+
+export const useHomeStore = defineStore("HomeStore", {
+  state: () => ({
+    sliders: [],
+  }),
+  getters: {},
+  actions: {},
+});
--- a/src/modules/Contact/components/contactUs.vue
+++ b/src/modules/Contact/components/contactUs.vue
@ -0,0 +1,70 @@
+<template>
+  <v-sheet color="#2D5284" class="py-5">
+    <v-card variant="text" color="transparent" class="py-5">
+      <v-card-title class="text-center py-0">
+        <h6
+          class="text-h6 text-accent font-weight-light"
+          style="letter-spacing: 3px !important"
+        >
+          Contact Us
+        </h6>
+      </v-card-title>
+      <v-card-title class="text-center py-0 text-white">
+        <h4 class="text-h3 font-weight-medium">Contact Us we are everywhere</h4>
+      </v-card-title>
+    </v-card>
+
+    <v-row justify="center">
+      <v-col cols="11" md="10">
+        <v-row class="ma-0">
+          <v-col cols="12" md="6" class="d-flex align-center">
+            <v-row class="ma-0">
+              <v-col cols="12" md="8">
+                <v-list
+                  class="px-0 py-3 bg-transparent d-flex align-start justify-space-between"
+                >
+                  <v-list-item>
+                    <v-list-item-title class="py-3">
+                      <v-icon class="text-accent mr-2">mdi-map-marker</v-icon>
+                      Piazza Napoleone, Lucca, Tuscany
+                    </v-list-item-title>
+                    <v-list-item-title class="py-3">
+                      <v-icon class="text-accent mr-2">mdi-phone</v-icon>
+                      +39 346 368 5708
+                    </v-list-item-title>
+                    <v-list-item-title class="py-3">
+                      <v-icon class="text-accent mr-2">mdi-email</v-icon>
+                      italiainlimo@gmail.com
+                    </v-list-item-title>
+                  </v-list-item>
+                </v-list>
+                <v-sheet color="transparent" class="position-relative">
+                  <div class="decore_2">
+                    <gear height="60" />
+                  </div>
+                  <v-card height="249" rounded="lg"> </v-card>
+                </v-sheet>
+              </v-col>
+            </v-row>
+          </v-col>
+          <v-col cols="12" md="6">
+            <formContactUs />
+          </v-col>
+        </v-row>
+      </v-col>
+    </v-row>
+  </v-sheet>
+</template>
+
+<script setup>
+import formContactUs from "./formContactUs.vue";
+import gear from "@/core/components/decorations/gear.vue";
+</script>
+
+<style scoped>
+.decore_2 {
+  position: absolute;
+  left: -50px;
+  bottom: -30px;
+}
+</style>
--- a/src/modules/Contact/components/formContactUs.vue
+++ b/src/modules/Contact/components/formContactUs.vue
@ -0,0 +1,99 @@
+<template>
+  <v-sheet color="transparent" class="position-relative">
+    <div class="decore">
+      <gear />
+    </div>
+    <v-card class="pa-5" rounded="xl">
+      <div class="mb-10">
+        <v-card-title
+          class="text-center d-flex justify-center py-0"
+          style="border-bottom: 1px solid #aaaaaa"
+        >
+          <h4
+            class="text-primary pb-2 font-weight-medium"
+            style="border-bottom: 3px solid #2d5284"
+          >
+            Contact Sales
+          </h4>
+        </v-card-title>
+      </div>
+
+      <v-form>
+        <v-row class="ma-0">
+          <v-col
+            class="py-0"
+            cols="6"
+            v-for="(item, index) in items"
+            :key="index"
+          >
+            <v-text-field
+              variant="solo-filled"
+              :placeholder="item.placeholder"
+              class="rounded-xl"
+              bg-color="#D4D4D433"
+              rounded="lg"
+              flat
+            ></v-text-field>
+          </v-col>
+          <v-col cols="12" class="py-0">
+            <v-textarea
+              flat
+              variant="solo-filled"
+              rounded="lg"
+              placeholder="Your Message"
+              bg-color="#D4D4D433"
+            ></v-textarea>
+          </v-col>
+        </v-row>
+        <v-card-actions class="justify-center">
+          <v-btn
+            variant="elevated"
+            color="#2D5284"
+            width="258"
+            size="large"
+            rounded="xl"
+            >Submit</v-btn
+          >
+        </v-card-actions>
+      </v-form>
+    </v-card>
+  </v-sheet>
+</template>
+
+<script setup>
+import gear from "@/core/components/decorations/gear.vue";
+const items = [
+  {
+    placeholder: "First Name",
+  },
+  {
+    placeholder: "Last Name",
+  },
+  {
+    placeholder: "Email Adress",
+  },
+  {
+    placeholder: "Phone Number",
+  },
+  {
+    placeholder: "Country",
+  },
+  {
+    placeholder: "Phone Number",
+  },
+  {
+    placeholder: "Country",
+  },
+  {
+    placeholder: "Company Name",
+  },
+];
+</script>
+
+<style scoped>
+.decore {
+  position: absolute;
+  right: -50px;
+  top: -50px;
+}
+</style>
--- a/src/modules/Contact/pages/index.vue
+++ b/src/modules/Contact/pages/index.vue
@ -0,0 +1,25 @@
+<template>
+  <v-sheet class="pb-15">
+    <breadcrumbs :breadcrumbsItems="items" />
+    <contactUs />
+  </v-sheet>
+</template>
+
+<script setup>
+import contactUs from "../components/contactUs.vue";
+import breadcrumbs from "@/core/components/breadcrumbs.vue";
+const items = [
+  {
+    title: "Home",
+    disabled: false,
+    href: "/",
+  },
+  {
+    title: "Contact-Us",
+    disabled: true,
+    href: "/contact",
+  },
+];
+</script>
+
+<style scoped></style>
--- a/src/modules/Contact/routes/index.routes.js
+++ b/src/modules/Contact/routes/index.routes.js
@ -0,0 +1,14 @@
+import DefaultLayout from "@/core/layouts/default/Default.vue";
+import Contact from "../pages/index.vue";
+export default {
+  path: "/Contact",
+  component: DefaultLayout,
+  children: [
+    {
+      path: "",
+      name: "Contact",
+      component: Contact,
+      // meta: { title: translate("") },
+    },
+  ],
+};
--- a/src/modules/Contact/services/index.api.js
+++ b/src/modules/Contact/services/index.api.js
@ -0,0 +1 @@
+export const api = `/`;
--- a/src/modules/Contact/services/indexService.js
+++ b/src/modules/Contact/services/indexService.js
@ -0,0 +1,5 @@
+import BaseService from "@/core/classes/base/BaseService";
+import { api } from "./index.api";
+import Client from "@/core/classes/client/Client";
+
+export default class CategoriesService extends BaseService {}
--- a/src/modules/Contact/store/indexStore.js
+++ b/src/modules/Contact/store/indexStore.js
@ -0,0 +1,11 @@
+import { defineStore } from "pinia";
+import BaseStore from "@/core/classes/base/BaseStore";
+import Service from "../services/indexService";
+
+export const useHomeStore = defineStore("HomeStore", {
+  state: () => ({
+    sliders: [],
+  }),
+  getters: {},
+  actions: {},
+});
--- a/src/modules/Distributors/components/showRoom.vue
+++ b/src/modules/Distributors/components/showRoom.vue
@ -0,0 +1,44 @@
+<template>
+  <v-sheet class="py-9">
+    <v-row class="ma-0" justify="space-between">
+      <v-col cols="5">
+        <v-card-title>
+          <h6
+            class="text-h6 font-weight-regular text-primary"
+            style="letter-spacing: 4px !important"
+          >
+            Our Distributors
+          </h6>
+        </v-card-title>
+        <v-card-title>
+          <h4 class="text-h3 font-weight-medium" style="line-height: 50px">
+            Look at our local <br />
+            distributors
+          </h4>
+        </v-card-title>
+        <v-list class="d-flex align-start" style="gap: 40px">
+          <v-list-item class="">
+            <v-list-item-title class="py-2" v-for="n in 5">
+              Ankara
+            </v-list-item-title>
+          </v-list-item>
+          <v-list-item class="">
+            <v-list-item-title class="py-2" v-for="n in 3">
+              Ankara
+            </v-list-item-title>
+          </v-list-item>
+        </v-list>
+        <v-btn to="/distributors" color="primary" size="large" rounded="xl"
+          >See Details
+        </v-btn>
+      </v-col>
+      <v-col cols="5" class="d-flex align-center">
+        <v-card height="382" width="100%" class="bg-white"> </v-card>
+      </v-col>
+    </v-row>
+  </v-sheet>
+</template>
+
+<script setup></script>
+
+<style scoped></style>
--- a/src/modules/Distributors/pages/index.vue
+++ b/src/modules/Distributors/pages/index.vue
@ -0,0 +1,62 @@
+<template>
+  <v-sheet color="transparent ">
+    <breadcrumbs :breadcrumbsItems="items" />
+    <v-row justify="center">
+      <v-col cols="11">
+        <!-- map -->
+        <v-card color="red" height="457"></v-card>
+        <v-sheet>
+          <v-card-title class="text-center d-flex justify-center pa-8">
+            <h6
+              class="text-h6 text-primary me-5 font-weight-regular"
+              style="letter-spacing: 3px !important"
+            >
+              Our Distributors
+            </h6>
+          </v-card-title>
+          <v-expansion-panels class="ga-3 py-9 distributors" flat>
+            <v-expansion-panel
+              flat
+              v-for="n in 5"
+              :key="n"
+              class="text-center"
+              title="Ankara"
+              text=" Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi, ratione debitis quis est labore voluptatibus! Eaque cupiditate minima"
+            >
+            </v-expansion-panel>
+          </v-expansion-panels>
+        </v-sheet>
+      </v-col>
+    </v-row>
+  </v-sheet>
+</template>
+
+<script setup>
+import breadcrumbs from "@/core/components/breadcrumbs.vue";
+const items = [
+  {
+    title: "Home",
+    disabled: false,
+    href: "/",
+  },
+  {
+    title: "Distributors",
+    disabled: true,
+    href: "/distributors",
+  },
+];
+</script>
+
+<style>
+.distributors .v-expansion-panel-title {
+  display: flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  text-align: center !important;
+  font-size: 20px !important;
+}
+
+.distributors .v-expansion-panel-title__icon {
+  margin-left: 15px !important;
+}
+</style>
--- a/src/modules/Distributors/routes/index.routes.js
+++ b/src/modules/Distributors/routes/index.routes.js
@ -0,0 +1,14 @@
+import DefaultLayout from "@/core/layouts/default/Default.vue";
+import Distributors from "../pages/index.vue";
+export default {
+  path: "/Distributors",
+  component: DefaultLayout,
+  children: [
+    {
+      path: "",
+      name: "Distributors",
+      component: Distributors,
+      // meta: { title: translate("") },
+    },
+  ],
+};
--- a/src/modules/Distributors/services/index.api.js
+++ b/src/modules/Distributors/services/index.api.js
@ -0,0 +1 @@
+export const api = `/`;
--- a/src/modules/Distributors/services/indexService.js
+++ b/src/modules/Distributors/services/indexService.js
@ -0,0 +1,5 @@
+import BaseService from "@/core/classes/base/BaseService";
+import { api } from "./index.api";
+import Client from "@/core/classes/client/Client";
+
+export default class CategoriesService extends BaseService {}
--- a/src/modules/Distributors/store/indexStore.js
+++ b/src/modules/Distributors/store/indexStore.js
@ -0,0 +1,11 @@
+import { defineStore } from "pinia";
+import BaseStore from "@/core/classes/base/BaseStore";
+import Service from "../services/indexService";
+
+export const useHomeStore = defineStore("HomeStore", {
+  state: () => ({
+    sliders: [],
+  }),
+  getters: {},
+  actions: {},
+});
--- a/src/modules/Home/components/Introduction.vue
+++ b/src/modules/Home/components/Introduction.vue
@ -0,0 +1,114 @@
+<template>
+  <v-sheet class="pa-0 position-relative">
+    <v-carousel
+      v-model="model"
+      :cycle="true"
+      hide-delimiter-background
+      :show-arrows="false"
+      hide-delimiters
+      height="80vh"
+    >
+      <v-carousel-item cover v-for="n in 4" :key="n">
+        <!-- <v-img cover :src="`/Home/slider/${n}.png`"></v-img> -->
+        <v-parallax :src="`/Home/slider/${n}.png`"></v-parallax>
+      </v-carousel-item>
+    </v-carousel>
+
+    <div>
+      <v-sheet
+        color="transparent"
+        class="d-flex justify-center align-center delimiters"
+      >
+        <v-card
+          variant="text"
+          class="pagination cursor-pointer"
+          v-for="(n, index) in 4"
+          :key="n"
+          width="100"
+          height="4"
+          @click="selected(index)"
+          :class="index === model ? 'active' : 'disapled'"
+        ></v-card>
+      </v-sheet>
+    </div>
+    <v-sheet class="title">
+      <v-card
+        variant="text"
+        color="transparent"
+        min-width="50%"
+        class="d-flex flex-column justify-center align-center"
+      >
+        <v-card-title class="pa-0"
+          ><h4
+            class="text-accent font-weight-regular"
+            style="letter-spacing: 5px"
+          >
+            Industrial Automation
+          </h4></v-card-title
+        >
+        <v-card-title class="pa-0" style="max-width: 700px">
+          <h2 class="text-h2 text-white text-wrap text-center">
+            Industrial Automation & Control Solutions
+          </h2>
+        </v-card-title>
+        <v-card-subtitle
+          class="pa-0 mt-6"
+          style="max-width: 500px; opacity: 1 !important"
+        >
+          <p class="text-wrap text-center text-white text-body-1">
+            MNS automation and control products and solutions cover a wide range
+            of industrial, infrastructure and construction sectors
+          </p>
+        </v-card-subtitle>
+        <v-card-actions class="mt-8">
+          <v-btn
+            variant="text"
+            class="bg-primary rounded-xl text-body-1 font-weight-regular"
+            width="124"
+            size="large"
+            to="/products"
+            >Products</v-btn
+          >
+        </v-card-actions>
+      </v-card>
+    </v-sheet>
+  </v-sheet>
+</template>
+
+<script setup>
+import { ref } from "vue";
+const model = ref();
+const selected = (index) => {
+  model.value = index;
+};
+</script>
+
+<style scoped>
+.delimiters {
+  position: absolute;
+  gap: 39px;
+  bottom: 40px;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 99;
+}
+.disapled {
+  background-color: #ffffff;
+  transition: 1s;
+}
+.active {
+  background-color: #e9ae0c;
+  transition: 1s;
+}
+.title {
+  position: absolute;
+  top: 50%;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.274);
+  transform: translateY(-50%);
+  display: flex;
+  justify-content: center;
+}
+</style>
--- a/src/modules/Home/pages/index.vue
+++ b/src/modules/Home/pages/index.vue
@ -0,0 +1,116 @@
+<template>
+  <v-sheet class="pa-0" color="transparent">
+    <Introduction />
+
+    <v-sheet class="d-flex justify-center py-9 ga-10">
+      <v-card
+        width="360"
+        height="100"
+        variant="text"
+        class="pa-5 rounded-xl elevation-10"
+      >
+        <v-row class="ma-0 h-100">
+          <v-col cols="6" class="h-100 d-flex align-center pa-0">
+            <v-avatar class="ml-n3" image="/Home/avatar.png"></v-avatar>
+            <v-avatar class="ml-n3" image="/Home/avatar.png"></v-avatar>
+            <v-avatar class="ml-n3" image="/Home/avatar.png"></v-avatar>
+            <v-avatar class="ml-n3" image="/Home/avatar.png"></v-avatar>
+            <v-avatar class="ml-n3" image="/Home/avatar.png"></v-avatar>
+            <v-avatar class="ml-n3 d-flex" image="/Home/avatar.png"> </v-avatar>
+          </v-col>
+          <v-col cols="6" class="pa-0 d-flex flex-column justify-center">
+            <v-card-title class=""
+              ><h4 class="text-h6" style="line-height: 20px">
+                72k+ Happy
+              </h4></v-card-title
+            >
+            <v-card-title class=""
+              ><h4 class="text-h6" style="line-height: 20px">
+                Customers
+              </h4></v-card-title
+            >
+          </v-col>
+        </v-row>
+      </v-card>
+      <v-card
+        width="320"
+        height="100"
+        variant="text"
+        class="pa-5 rounded-xl elevation-10"
+      >
+        <v-row class="ma-0 h-100">
+          <v-col cols="2" class="h-100 d-flex align-center pa-0">
+            <v-avatar size="x-large" image="/Home/avatar.png"></v-avatar>
+          </v-col>
+          <v-col cols="10" class="pa-0 d-flex flex-column justify-center">
+            <v-card-title class=""
+              ><h4 class="text-h6" style="line-height: 20px">
+                200+ New
+              </h4></v-card-title
+            >
+            <v-card-title class=""
+              ><h4 class="text-h6" style="line-height: 20px">
+                Listings Everyday!
+              </h4></v-card-title
+            >
+          </v-col>
+        </v-row>
+      </v-card>
+    </v-sheet>
+
+    <v-row class="pa-0 ma-0" justify="center">
+      <v-col cols="10">
+        <!-- gear -->
+
+        <div class="ml-16" style="width: 100px">
+          <v-img
+            class="gear"
+            height="100"
+            src="@/assets/decorations/gear.svg"
+          ></v-img>
+        </div>
+      </v-col>
+
+      <v-col cols="11">
+        <!-- Trusted by -->
+        <trustedBy />
+
+        <introductionAbout />
+        <qualityCertificates />
+        <products />
+      </v-col>
+      <Services />
+      <v-row justify="center">
+        <v-col cols="11">
+          <products_2 />
+          <ourTeam />
+        </v-col>
+      </v-row>
+    </v-row>
+    <contactUs />
+    <v-row justify="center">
+      <v-col cols="10">
+        <distributors />
+      </v-col>
+    </v-row>
+  </v-sheet>
+</template>
+
+<script setup>
+import Introduction from "../components/Introduction.vue";
+import trustedBy from "@/modules/About/components/trustedBy.vue";
+import introductionAbout from "@/modules/About/components/Introduction.vue";
+import qualityCertificates from "@/modules/qualityCertificates/components/showHome.vue";
+import products from "@/modules/Products/components/showRoom.vue";
+import Services from "@/modules/OurServices/components/showRoom.vue";
+import products_2 from "@/modules/Products/components/showRoom_2.vue";
+import ourTeam from "@/modules/About/components/ourTeam.vue";
+import contactUs from "@/modules/Contact/components/contactUs.vue";
+import distributors from "@/modules/Distributors/components/showRoom.vue";
+</script>
+
+<style scoped>
+.gear {
+  animation: rotate 5s linear infinite;
+}
+</style>
--- a/src/modules/Home/routes/index.routes.js
+++ b/src/modules/Home/routes/index.routes.js
@ -0,0 +1,15 @@
+import { translate } from "@/plugins/i18n";
+import DefaultLayout from "@/core/layouts/default/Default.vue";
+import Home from "../pages/index.vue";
+export default {
+  path: "/",
+  component: DefaultLayout,
+  children: [
+    {
+      path: "/",
+      name: "Home",
+      component: Home,
+      // meta: { title: translate("") },
+    },
+  ],
+};
--- a/src/modules/Home/services/index.api.js
+++ b/src/modules/Home/services/index.api.js
@ -0,0 +1 @@
+export const api = `/`;
--- a/src/modules/Home/services/indexService.js
+++ b/src/modules/Home/services/indexService.js
@ -0,0 +1,5 @@
+import BaseService from "@/core/classes/base/BaseService";
+import { api } from "./index.api";
+import Client from "@/core/classes/client/Client";
+
+export default class CategoriesService extends BaseService {}
--- a/Show More
+++ b/Show More