update: added adaptability for pages

Merge branch 'render-main-page-data' into add-pages
Loading bonus clients from API
2025-05-01 05:14:46 +03:00 · 2025-05-01 01:21:04 +03:00 · 2025-05-01 01:45:12 +05:00 · 2025-05-01 01:16:11 +05:00 · 2025-04-30 20:28:35 +05:00 · 2025-04-30 20:28:25 +05:00
79 changed files with 2628 additions and 2186 deletions
--- a/.env.example
+++ b/.env.example
@ -0,0 +1,3 @@
+TAYLOR_API_ENDPOINT=
+TAYLOR_API_TOKEN=
+TAYLOR_MEDIA_URL=
--- a/.gitignore
+++ b/.gitignore
@ -34,7 +34,7 @@ yarn-error.log*
 .pnpm-debug.log*

 # env files (can opt-in for committing if needed)
-.env*
+.env

 # vercel
 .vercel
--- a/next.config.ts
+++ b/next.config.ts
@ -1,7 +1,15 @@
-import type { NextConfig } from "next";
+import type { NextConfig } from 'next';

 const nextConfig: NextConfig = {
-  /* config options here */
+  images: {
+    remotePatterns: [
+      {
+        protocol: 'https',
+        hostname: 'media.bambooapp.ai',
+        pathname: '/files/**',
+      },
+    ],
+  },
 };

 export default nextConfig;
--- a/package.json
+++ b/package.json
@ -11,6 +11,7 @@
  },
  "dependencies": {
    "@hookform/resolvers": "^5.0.1",
+    "@pbe/react-yandex-maps": "^1.2.5",
    "@radix-ui/react-collapsible": "^1.1.8",
    "@radix-ui/react-dialog": "^1.1.11",
    "@radix-ui/react-dropdown-menu": "^2.1.11",
@ -23,13 +24,18 @@
    "@radix-ui/react-toast": "^1.2.11",
    "@reduxjs/toolkit": "^2.7.0",
    "aos": "^2.3.4",
+    "axios": "^1.9.0",
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
+    "cookies-next": "^5.1.0",
    "date-fns": "^4.1.0",
    "embla-carousel-autoplay": "^8.6.0",
    "embla-carousel-react": "^8.6.0",
+    "json-to-graphql-query": "^2.3.0",
+    "lodash": "^4.17.21",
    "lucide-react": "^0.501.0",
    "next": "15.3.1",
+    "next-redux-wrapper": "^8.1.0",
    "next-themes": "^0.4.6",
    "react": "^19.0.0",
    "react-day-picker": "8.10.1",
@ -52,7 +58,8 @@
    "@types/eslint": "^9.6.1",
    "@types/eslint-config-prettier": "^6.11.3",
    "@types/eslint-plugin-tailwindcss": "^3.17.0",
-    "@types/node": "^20",
+    "@types/lodash": "^4.17.16",
+    "@types/node": "^20.17.30",
    "@types/react": "^19",
    "@types/react-dom": "^19",
    "@typescript-eslint/parser": "^8.30.1",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -11,6 +11,9 @@ importers:
      '@hookform/resolvers':
        specifier: ^5.0.1
        version: 5.0.1(react-hook-form@7.56.1(react@19.1.0))
+      '@pbe/react-yandex-maps':
+        specifier: ^1.2.5
+        version: 1.2.5(react@19.1.0)
      '@radix-ui/react-collapsible':
        specifier: ^1.1.8
        version: 1.1.8(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
@ -47,12 +50,18 @@ importers:
      aos:
        specifier: ^2.3.4
        version: 2.3.4
+      axios:
+        specifier: ^1.9.0
+        version: 1.9.0
      class-variance-authority:
        specifier: ^0.7.1
        version: 0.7.1
      clsx:
        specifier: ^2.1.1
        version: 2.1.1
+      cookies-next:
+        specifier: ^5.1.0
+        version: 5.1.0(next@15.3.1(react-dom@19.1.0(react@19.1.0))(react@19.1.0))(react@19.1.0)
      date-fns:
        specifier: ^4.1.0
        version: 4.1.0
@ -62,12 +71,21 @@ importers:
      embla-carousel-react:
        specifier: ^8.6.0
        version: 8.6.0(react@19.1.0)
+      json-to-graphql-query:
+        specifier: ^2.3.0
+        version: 2.3.0
+      lodash:
+        specifier: ^4.17.21
+        version: 4.17.21
      lucide-react:
        specifier: ^0.501.0
        version: 0.501.0(react@19.1.0)
      next:
        specifier: 15.3.1
        version: 15.3.1(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      next-redux-wrapper:
+        specifier: ^8.1.0
+        version: 8.1.0(next@15.3.1(react-dom@19.1.0(react@19.1.0))(react@19.1.0))(react-redux@9.2.0(@types/react@19.1.2)(react@19.1.0)(redux@5.0.1))(react@19.1.0)
      next-themes:
        specifier: ^0.4.6
        version: 0.4.6(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
@ -129,8 +147,11 @@ importers:
      '@types/eslint-plugin-tailwindcss':
        specifier: ^3.17.0
        version: 3.17.0
+      '@types/lodash':
+        specifier: ^4.17.16
+        version: 4.17.16
      '@types/node':
-        specifier: ^20
+        specifier: ^20.17.30
        version: 20.17.30
      '@types/react':
        specifier: ^19
@ -508,6 +529,12 @@ packages:
    resolution: {integrity: sha512-nn5ozdjYQpUCZlWGuxcJY/KpxkWQs4DcbMCmKojjyrYDEAGy4Ce19NN4v5MduafTwJlbKc99UA8YhSVqq9yPZA==}
    engines: {node: '>=12.4.0'}

+  '@pbe/react-yandex-maps@1.2.5':
+    resolution: {integrity: sha512-cBojin5e1fPx9XVCAqHQJsCnHGMeBNsP0TrNfpWCrPFfxb30ye+JgcGr2mn767Gbr1d+RufBLRiUcX2kaiAwjQ==}
+    engines: {node: '>=16'}
+    peerDependencies:
+      react: ^16.x || ^17.x || ^18.x
+
  '@pkgr/core@0.2.4':
    resolution: {integrity: sha512-ROFF39F6ZrnzSUEmQQZUar0Jt4xVoP9WnDRdWwF4NNcXs3xBTLgBUDoOwW141y1jP+S8nahIbdxbFC7IShw9Iw==}
    engines: {node: ^12.20.0 || ^14.18.0 || >=16.0.0}
@ -1080,6 +1107,9 @@ packages:
  '@types/json5@0.0.29':
    resolution: {integrity: sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==}

+  '@types/lodash@4.17.16':
+    resolution: {integrity: sha512-HX7Em5NYQAXKW+1T+FiuG27NGwzJfCX3s1GjOa7ujxZa52kjJLOr4FUxT+giF6Tgxv1e+/czV/iTtBw27WTU9g==}
+
  '@types/node@20.17.30':
    resolution: {integrity: sha512-7zf4YyHA+jvBNfVrk2Gtvs6x7E8V+YDW05bNfG2XkWDJfYRXrTiP/DsB2zSYTaHX0bGIujTBQdMVAhb+j7mwpg==}

@ -1094,6 +1124,9 @@ packages:
  '@types/use-sync-external-store@0.0.6':
    resolution: {integrity: sha512-zFDAD+tlpf2r4asuHEj0XH6pY6i0g5NeAHPn+15wk3BV6JA69eERFXC1gyGThDkVa1zCyKr5jox1+2LbV/AMLg==}

+  '@types/yandex-maps@2.1.29':
+    resolution: {integrity: sha512-nuibRWj3RU/9KXlCzTrRtDE+n6V9l7NbT9JakicqZ5OXIdwyb6blvV2Uwn6lB58WYm3DSUDP2I2AWlnWMc8z2w==}
+
  '@typescript-eslint/eslint-plugin@8.30.1':
    resolution: {integrity: sha512-v+VWphxMjn+1t48/jO4t950D6KR8JaJuNXzi33Ve6P8sEmPr5k6CEXjdGwT6+LodVnEa91EQCtwjWNUCPweo+Q==}
    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
@ -1291,6 +1324,9 @@ packages:
    resolution: {integrity: sha512-hsU18Ae8CDTR6Kgu9DYf0EbCr/a5iGL0rytQDobUcdpYOKokk8LEjVphnXkDkgpi0wYVsqrXuP0bZxJaTqdgoA==}
    engines: {node: '>= 0.4'}

+  asynckit@0.4.0:
+    resolution: {integrity: sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==}
+
  available-typed-arrays@1.0.7:
    resolution: {integrity: sha512-wvUjBtSGN7+7SjNpq/9M2Tg350UZD3q62IFZLbRAR1bSMlCo1ZaeW+BJ+D090e4hIIZLBcTDWe4Mh4jvUDajzQ==}
    engines: {node: '>= 0.4'}
@ -1299,6 +1335,9 @@ packages:
    resolution: {integrity: sha512-Xm7bpRXnDSX2YE2YFfBk2FnF0ep6tmG7xPh8iHee8MIcrgq762Nkce856dYtJYLkuIoYZvGfTs/PbZhideTcEg==}
    engines: {node: '>=4'}

+  axios@1.9.0:
+    resolution: {integrity: sha512-re4CqKTJaURpzbLHtIi6XpDv20/CnpXOtjRY5/CU32L8gU8ek9UIivcfvSWvmKEngmVbrUtPpdDwWDWL7DNHvg==}
+
  axobject-query@4.1.0:
    resolution: {integrity: sha512-qIj0G9wZbMGNLjLmg1PT6v2mE9AH2zlnADJD/2tC6E00hgmhUOfEB6greHPAfLRSufHqROIUTkw6E+M3lH0PTQ==}
    engines: {node: '>= 0.4'}
@ -1370,9 +1409,23 @@ packages:
    resolution: {integrity: sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A==}
    engines: {node: '>=12.5.0'}

+  combined-stream@1.0.8:
+    resolution: {integrity: sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==}
+    engines: {node: '>= 0.8'}
+
  concat-map@0.0.1:
    resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==}

+  cookie@1.0.2:
+    resolution: {integrity: sha512-9Kr/j4O16ISv8zBBhJoi4bXOYNTkFLOqSL3UDB0njXxCXNezjeyVrJyGOWtgfs/q2km1gwBcfH8q1yEGoMYunA==}
+    engines: {node: '>=18'}
+
+  cookies-next@5.1.0:
+    resolution: {integrity: sha512-9Ekne+q8hfziJtnT9c1yDUBqT0eDMGgPrfPl4bpR3xwQHLTd/8gbSf6+IEkP/pjGsDZt1TGbC6emYmFYRbIXwQ==}
+    peerDependencies:
+      next: '>=15.0.0'
+      react: '>= 16.8.0'
+
  cross-spawn@7.0.6:
    resolution: {integrity: sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==}
    engines: {node: '>= 8'}
@ -1426,6 +1479,10 @@ packages:
    resolution: {integrity: sha512-8QmQKqEASLd5nx0U1B1okLElbUuuttJ/AnYmRXbbbGDWh6uS208EjD4Xqq/I9wK7u0v6O08XhTWnt5XtEbR6Dg==}
    engines: {node: '>= 0.4'}

+  delayed-stream@1.0.0:
+    resolution: {integrity: sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==}
+    engines: {node: '>=0.4.0'}
+
  detect-libc@2.0.3:
    resolution: {integrity: sha512-bwy0MGW55bG41VqxxypOsdSdGqLwXPI/focwgTYCFMbdUiBAxLg9CFzG08sz2aqzknwiX7Hkl0bQENjg8iLByw==}
    engines: {node: '>=8'}
@ -1696,10 +1753,23 @@ packages:
  flatted@3.3.3:
    resolution: {integrity: sha512-GX+ysw4PBCz0PzosHDepZGANEuFCMLrnRTiEy9McGjmkCQYwRq4A/X786G/fjM/+OjsWSU1ZrY5qyARZmO/uwg==}

+  follow-redirects@1.15.9:
+    resolution: {integrity: sha512-gew4GsXizNgdoRyqmyfMHyAmXsZDk6mHkSxZFCzW9gwlbtOW44CDtYavM+y+72qD/Vq2l550kMF52DT8fOLJqQ==}
+    engines: {node: '>=4.0'}
+    peerDependencies:
+      debug: '*'
+    peerDependenciesMeta:
+      debug:
+        optional: true
+
  for-each@0.3.5:
    resolution: {integrity: sha512-dKx12eRCVIzqCxFGplyFKJMPvLEWgmNtUrpTiJIR5u97zEhRG8ySrtboPHZXx7daLxQVrl643cTzbab2tkQjxg==}
    engines: {node: '>= 0.4'}

+  form-data@4.0.2:
+    resolution: {integrity: sha512-hGfm/slu0ZabnNt4oaRZ6uREyfCj6P4fT/n6A1rGV+Z0VdGXjfOhVUpkn6qVQONHGIFwmveGXyDs75+nr6FM8w==}
+    engines: {node: '>= 6'}
+
  function-bind@1.1.2:
    resolution: {integrity: sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==}

@ -1949,6 +2019,9 @@ packages:
  json-stable-stringify-without-jsonify@1.0.1:
    resolution: {integrity: sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==}

+  json-to-graphql-query@2.3.0:
+    resolution: {integrity: sha512-khZtaLLQ0HllFec+t89ZWduUZ0rmne/OpRm/39hyZUWDHNx9Yk4DgQzDtMeqd8zj2g5opBD4GHrdtH0JzKnN2g==}
+
  json5@1.0.2:
    resolution: {integrity: sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==}
    hasBin: true
@ -2072,6 +2145,14 @@ packages:
    resolution: {integrity: sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==}
    engines: {node: '>=8.6'}

+  mime-db@1.52.0:
+    resolution: {integrity: sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==}
+    engines: {node: '>= 0.6'}
+
+  mime-types@2.1.35:
+    resolution: {integrity: sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==}
+    engines: {node: '>= 0.6'}
+
  minimatch@10.0.1:
    resolution: {integrity: sha512-ethXTt3SGGR+95gudmqJ1eNhRO7eGEGIgYA9vnPatK4/etz2MEVDno5GMCibdMTuBMyElzIlgxMna3K94XDIDQ==}
    engines: {node: 20 || >=22}
@ -2102,6 +2183,13 @@ packages:
  natural-compare@1.4.0:
    resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==}

+  next-redux-wrapper@8.1.0:
+    resolution: {integrity: sha512-2hIau0hcI6uQszOtrvAFqgc0NkZegKYhBB7ZAKiG3jk7zfuQb4E7OV9jfxViqqojh3SEHdnFfPkN9KErttUKuw==}
+    peerDependencies:
+      next: '>=9'
+      react: '*'
+      react-redux: '*'
+
  next-themes@0.4.6:
    resolution: {integrity: sha512-pZvgD5L0IEvX5/9GWyHMf3m8BKiVQwsCMHfoFosXtXBMnaS0ZnIJ9ST4b4NqLVKDEm8QBxoNNGNaBv2JNF6XNA==}
    peerDependencies:
@ -2282,6 +2370,9 @@ packages:
  prop-types@15.8.1:
    resolution: {integrity: sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==}

+  proxy-from-env@1.1.0:
+    resolution: {integrity: sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==}
+
  punycode@2.3.1:
    resolution: {integrity: sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==}
    engines: {node: '>=6'}
@ -2968,6 +3059,11 @@ snapshots:

  '@nolyfill/is-core-module@1.0.39': {}

+  '@pbe/react-yandex-maps@1.2.5(react@19.1.0)':
+    dependencies:
+      '@types/yandex-maps': 2.1.29
+      react: 19.1.0
+
  '@pkgr/core@0.2.4': {}

  '@radix-ui/number@1.1.1': {}
@ -3524,6 +3620,8 @@ snapshots:

  '@types/json5@0.0.29': {}

+  '@types/lodash@4.17.16': {}
+
  '@types/node@20.17.30':
    dependencies:
      undici-types: 6.19.8
@ -3538,6 +3636,8 @@ snapshots:

  '@types/use-sync-external-store@0.0.6': {}

+  '@types/yandex-maps@2.1.29': {}
+
  '@typescript-eslint/eslint-plugin@8.30.1(@typescript-eslint/parser@8.30.1(eslint@9.25.0(jiti@2.4.2))(typescript@5.8.3))(eslint@9.25.0(jiti@2.4.2))(typescript@5.8.3)':
    dependencies:
      '@eslint-community/regexpp': 4.12.1
@ -3765,12 +3865,22 @@ snapshots:

  async-function@1.0.0: {}

+  asynckit@0.4.0: {}
+
  available-typed-arrays@1.0.7:
    dependencies:
      possible-typed-array-names: 1.1.0

  axe-core@4.10.3: {}

+  axios@1.9.0:
+    dependencies:
+      follow-redirects: 1.15.9
+      form-data: 4.0.2
+      proxy-from-env: 1.1.0
+    transitivePeerDependencies:
+      - debug
+
  axobject-query@4.1.0: {}

  balanced-match@1.0.2: {}
@ -3846,8 +3956,20 @@ snapshots:
      color-string: 1.9.1
    optional: true

+  combined-stream@1.0.8:
+    dependencies:
+      delayed-stream: 1.0.0
+
  concat-map@0.0.1: {}

+  cookie@1.0.2: {}
+
+  cookies-next@5.1.0(next@15.3.1(react-dom@19.1.0(react@19.1.0))(react@19.1.0))(react@19.1.0):
+    dependencies:
+      cookie: 1.0.2
+      next: 15.3.1(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      react: 19.1.0
+
  cross-spawn@7.0.6:
    dependencies:
      path-key: 3.1.1
@ -3900,6 +4022,8 @@ snapshots:
      has-property-descriptors: 1.0.2
      object-keys: 1.1.1

+  delayed-stream@1.0.0: {}
+
  detect-libc@2.0.3: {}

  detect-node-es@1.1.0: {}
@ -4325,10 +4449,19 @@ snapshots:

  flatted@3.3.3: {}

+  follow-redirects@1.15.9: {}
+
  for-each@0.3.5:
    dependencies:
      is-callable: 1.2.7

+  form-data@4.0.2:
+    dependencies:
+      asynckit: 0.4.0
+      combined-stream: 1.0.8
+      es-set-tostringtag: 2.1.0
+      mime-types: 2.1.35
+
  function-bind@1.1.2: {}

  function.prototype.name@1.1.8:
@ -4579,6 +4712,8 @@ snapshots:

  json-stable-stringify-without-jsonify@1.0.1: {}

+  json-to-graphql-query@2.3.0: {}
+
  json5@1.0.2:
    dependencies:
      minimist: 1.2.8
@ -4679,6 +4814,12 @@ snapshots:
      braces: 3.0.3
      picomatch: 2.3.1

+  mime-db@1.52.0: {}
+
+  mime-types@2.1.35:
+    dependencies:
+      mime-db: 1.52.0
+
  minimatch@10.0.1:
    dependencies:
      brace-expansion: 2.0.1
@ -4701,6 +4842,12 @@ snapshots:

  natural-compare@1.4.0: {}

+  next-redux-wrapper@8.1.0(next@15.3.1(react-dom@19.1.0(react@19.1.0))(react@19.1.0))(react-redux@9.2.0(@types/react@19.1.2)(react@19.1.0)(redux@5.0.1))(react@19.1.0):
+    dependencies:
+      next: 15.3.1(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      react: 19.1.0
+      react-redux: 9.2.0(@types/react@19.1.2)(react@19.1.0)(redux@5.0.1)
+
  next-themes@0.4.6(react-dom@19.1.0(react@19.1.0))(react@19.1.0):
    dependencies:
      react: 19.1.0
@ -4842,6 +4989,8 @@ snapshots:
      object-assign: 4.1.1
      react-is: 16.13.1

+  proxy-from-env@1.1.0: {}
+
  punycode@2.3.1: {}

  queue-microtask@1.2.3: {}
--- a/src/app/(dashboard)/corporate-dashboard/page.tsx
+++ b/src/app/(dashboard)/corporate-dashboard/page.tsx
@ -1,308 +1,5 @@
-'use client';
+import { CorporateDashboard } from "@/pages-templates/(dashboard)/corporate-dashboard";

-import { format, subMonths } from 'date-fns';
-import { ru } from 'date-fns/locale';
-import { Building2, CalendarIcon, LogOut, Wallet } from 'lucide-react';
-import { useState } from 'react';
-
-import { Button } from '@/shared/shadcn-ui/button';
-import { Calendar } from '@/shared/shadcn-ui/calendar';
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from '@/shared/shadcn-ui/card';
-import { Label } from '@/shared/shadcn-ui/label';
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from '@/shared/shadcn-ui/popover';
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from '@/shared/shadcn-ui/table';
-
-// import { CardsList } from '@/widgets/cards-list';
-
-// Sample company data
-const companyData = {
-  companyName: 'ООО «ТаджикТранс»',
-  numberOfCards: 12,
-  fund: 25000,
-  overdraft: 5000,
-  totalFund: 30000,
-  registrationDate: '10.03.2019',
-};
-
-// Sample transaction data
-const generateTransactions = () => {
-  const stations = [
-    'АЗС Душанбе-Центр',
-    'АЗС Душанбе-Запад',
-    'АЗС Душанбе-Восток',
-    'АЗС Худжанд',
-    'АЗС Куляб',
-  ];
-
-  const products = [
-    { name: 'ДТ', price: 8.5 },
-    { name: 'АИ-92', price: 9.2 },
-    { name: 'АИ-95', price: 10.5 },
-    { name: 'Z-100 Power', price: 11.8 },
-    { name: 'Пропан', price: 6.3 },
-  ];
-
-  const transactions = [];
-
-  // Generate 50 random transactions over the last 6 months
-  for (let i = 0; i < 50; i++) {
-    const date = subMonths(new Date(), Math.random() * 6);
-    const station = stations[Math.floor(Math.random() * stations.length)];
-    const product = products[Math.floor(Math.random() * products.length)];
-    const quantity = Math.floor(Math.random() * 40) + 10; // 10-50 liters
-    const cost = product.price;
-    const total = quantity * cost;
-
-    transactions.push({
-      id: i + 1,
-      date,
-      station,
-      product: product.name,
-      quantity,
-      cost,
-      total,
-    });
-  }
-
-  // Sort by date (newest first)
-  return transactions.sort((a, b) => b.date.getTime() - a.date.getTime());
-};
-
-const transactions = generateTransactions();
-
-export default function CorporateDashboard() {
-  const [startDate, setStartDate] = useState<Date | undefined>(
-    subMonths(new Date(), 1),
-  );
-  const [endDate, setEndDate] = useState<Date | undefined>(new Date());
-  const [filteredTransactions, setFilteredTransactions] =
-    useState(transactions);
-
-  // Filter transactions by date range
-  const filterTransactions = () => {
-    if (!startDate || !endDate) return;
-
-    const filtered = transactions.filter((transaction) => {
-      const transactionDate = new Date(transaction.date);
-      return transactionDate >= startDate && transactionDate <= endDate;
-    });
-
-    setFilteredTransactions(filtered);
-  };
-
-  return (
-    <div className='flex min-h-screen flex-col'>
-      <main className='flex-1 py-10'>
-        <div className='container mx-auto max-w-6xl'>
-          <div className='mb-8 flex items-center justify-between'>
-            <h1 className='text-3xl font-bold'>Корпоративный кабинет</h1>
-            <Button variant='outline' className='gap-2'>
-              <LogOut className='h-4 w-4' />
-              Выйти
-            </Button>
-          </div>
-
-          <div className='mb-10 grid gap-3 md:grid-cols-3 md:gap-6'>
-            {/* Company Card */}
-            <Card className='md:col-span-2'>
-              <CardHeader className='pb-2'>
-                <CardTitle className='flex items-center gap-2'>
-                  <Building2 className='h-5 w-5 text-red-600' />
-                  Информация о компании
-                </CardTitle>
-              </CardHeader>
-              <CardContent>
-                <div className='grid gap-6 md:grid-cols-2'>
-                  <div>
-                    <div className='mb-4 space-y-1'>
-                      <p className='text-sm text-gray-500'>Название компании</p>
-                      <p className='font-medium'>{companyData.companyName}</p>
-                    </div>
-                    <div className='mb-4 space-y-1'>
-                      <p className='text-sm text-gray-500'>Количество карт</p>
-                      <p className='font-medium'>{companyData.numberOfCards}</p>
-                    </div>
-                    <div className='space-y-1'>
-                      <p className='text-sm text-gray-500'>Дата регистрации</p>
-                      <p className='font-medium'>
-                        {companyData.registrationDate}
-                      </p>
-                    </div>
-                  </div>
-                  <div>
-                    <div className='mb-4 space-y-1'>
-                      <p className='text-sm text-gray-500'>Фонд</p>
-                      <p className='font-medium'>
-                        {companyData.fund.toLocaleString()} сомони
-                      </p>
-                    </div>
-                    <div className='mb-4 space-y-1'>
-                      <p className='text-sm text-gray-500'>Овердрафт</p>
-                      <p className='font-medium'>
-                        {companyData.overdraft.toLocaleString()} сомони
-                      </p>
-                    </div>
-                  </div>
-                </div>
-              </CardContent>
-            </Card>
-
-            {/* Fund Card */}
-            <Card className='bg-gradient-to-br from-red-600 to-red-800 text-white'>
-              <CardHeader>
-                <CardTitle className='flex items-center gap-2'>
-                  <Wallet className='h-5 w-5' />
-                  Общий фонд
-                </CardTitle>
-                <CardDescription className='text-white/80'>
-                  Доступные средства
-                </CardDescription>
-              </CardHeader>
-              <CardContent>
-                <div className='text-center'>
-                  <p className='mb-2 text-4xl font-bold'>
-                    {companyData.totalFund.toLocaleString()}
-                  </p>
-                  <p className='text-white/80'>сомони</p>
-                </div>
-              </CardContent>
-            </Card>
-          </div>
-
-          {/* <CardsList totalCards={companyData.numberOfCards} /> */}
-
-          {/* Transactions */}
-          <div className='space-y-6'>
-            <div className='flex flex-col items-start justify-between gap-4 md:flex-row md:items-center'>
-              <h2 className='text-2xl font-bold'>История операций</h2>
-
-              <div className='flex w-full flex-col gap-4 md:w-auto md:flex-row'>
-                <div className='grid grid-cols-2 gap-2'>
-                  <div className='flex items-center gap-2'>
-                    <Label htmlFor='start-date'>От</Label>
-                    <Popover>
-                      <PopoverTrigger asChild>
-                        <Button
-                          variant='outline'
-                          className='w-full justify-start text-left font-normal'
-                        >
-                          <CalendarIcon className='mr-2 h-4 w-4' />
-                          {startDate
-                            ? format(startDate, 'PP', { locale: ru })
-                            : 'Выберите дату'}
-                        </Button>
-                      </PopoverTrigger>
-                      <PopoverContent className='w-auto p-0'>
-                        <Calendar
-                          mode='single'
-                          selected={startDate}
-                          onSelect={setStartDate}
-                          initialFocus
-                        />
-                      </PopoverContent>
-                    </Popover>
-                  </div>
-
-                  <div className='flex items-center gap-2'>
-                    <Label htmlFor='end-date'>До</Label>
-                    <Popover>
-                      <PopoverTrigger asChild>
-                        <Button
-                          variant='outline'
-                          className='w-full justify-start text-left font-normal'
-                        >
-                          <CalendarIcon className='mr-2 h-4 w-4' />
-                          {endDate
-                            ? format(endDate, 'PP', { locale: ru })
-                            : 'Выберите дату'}
-                        </Button>
-                      </PopoverTrigger>
-                      <PopoverContent className='w-auto p-0'>
-                        <Calendar
-                          mode='single'
-                          selected={endDate}
-                          onSelect={setEndDate}
-                          initialFocus
-                        />
-                      </PopoverContent>
-                    </Popover>
-                  </div>
-                </div>
-
-                <Button
-                  className='mt-auto bg-red-600 hover:bg-red-700'
-                  onClick={filterTransactions}
-                >
-                  Применить
-                </Button>
-              </div>
-            </div>
-
-            <div className='rounded-md border'>
-              <Table>
-                <TableHeader>
-                  <TableRow>
-                    <TableHead>Дата</TableHead>
-                    <TableHead>Станция</TableHead>
-                    <TableHead>Продукт</TableHead>
-                    <TableHead className='text-right'>Кол-во (л)</TableHead>
-                    <TableHead className='text-right'>Стоимость</TableHead>
-                    <TableHead className='text-right'>Сумма</TableHead>
-                  </TableRow>
-                </TableHeader>
-                <TableBody>
-                  {filteredTransactions.length > 0 ? (
-                    filteredTransactions.map((transaction) => (
-                      <TableRow key={transaction.id}>
-                        <TableCell>
-                          {format(transaction.date, 'dd.MM.yyyy')}
-                        </TableCell>
-                        <TableCell>{transaction.station}</TableCell>
-                        <TableCell>{transaction.product}</TableCell>
-                        <TableCell className='text-right'>
-                          {transaction.quantity}
-                        </TableCell>
-                        <TableCell className='text-right'>
-                          {transaction.cost.toFixed(2)} сомони
-                        </TableCell>
-                        <TableCell className='text-right font-medium'>
-                          {transaction.total.toFixed(2)} сомони
-                        </TableCell>
-                      </TableRow>
-                    ))
-                  ) : (
-                    <TableRow>
-                      <TableCell
-                        colSpan={6}
-                        className='py-6 text-center text-gray-500'
-                      >
-                        Нет операций за выбранный период
-                      </TableCell>
-                    </TableRow>
-                  )}
-                </TableBody>
-              </Table>
-            </div>
-          </div>
-        </div>
-      </main>
-    </div>
-  );
+export default function Corporate() {
+  return <CorporateDashboard/>
 }
--- a/src/app/(dashboard)/customer-dashboard/page.tsx
+++ b/src/app/(dashboard)/customer-dashboard/page.tsx
@ -1,110 +1,5 @@
-import { ArrowUpRight, Clock, CreditCard, LogOut, User } from 'lucide-react';
+import { CustomerDashboard } from "@/pages-templates/(dashboard)/customer-dashboard";

-import { Button } from '@/shared/shadcn-ui/button';
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from '@/shared/shadcn-ui/card';
-
-import { TransactionsTable } from '@/widgets/transactions-table';
-
-// Sample customer data
-const customerData = {
-  firstName: 'Алишер',
-  lastName: 'Рахмонов',
-  passportNumber: 'A12345678',
-  bonusPoints: 1250,
-  cardNumber: '5678-9012-3456-7890',
-  expiryDate: '12/2025',
-  registrationDate: '15.06.2020',
-};
-
-export default function CustomerDashboard() {
-  return (
-    <div className='flex min-h-screen flex-col'>
-      <main className='flex-1 py-10'>
-        <div className='container mx-auto max-w-6xl'>
-          <div className='mb-8 flex items-center justify-between'>
-            <h1 className='text-3xl font-bold'>Личный кабинет</h1>
-            <Button variant='outline' className='gap-2'>
-              <LogOut className='h-4 w-4' />
-              Выйти
-            </Button>
-          </div>
-
-          <div className='mb-10 grid gap-3 md:grid-cols-3 md:gap-6'>
-            {/* Bonus Card */}
-            <Card className='bg-gradient-to-br from-red-600 to-red-800 text-white'>
-              <CardHeader>
-                <CardTitle className='flex items-center gap-2'>
-                  <CreditCard className='h-5 w-5' />
-                  Бонусная карта
-                </CardTitle>
-                <CardDescription className='text-white/80'>
-                  Ваши накопленные бонусы
-                </CardDescription>
-              </CardHeader>
-              <CardContent>
-                <div className='text-center'>
-                  <p className='mb-2 text-4xl font-bold'>
-                    {customerData.bonusPoints}
-                  </p>
-                  <p className='text-white/80'>бонусных баллов</p>
-                </div>
-                <div className='mt-6 flex items-center justify-between'>
-                  <div className='flex items-center gap-1 text-sm text-white/80'>
-                    <Clock className='h-4 w-4' />
-                    <span>Действует до: 31.12.2023</span>
-                  </div>
-                  <ArrowUpRight className='h-5 w-5 text-white/60' />
-                </div>
-              </CardContent>
-            </Card>
-            {/* Customer Card */}
-            <Card className='md:col-span-2'>
-              <CardHeader className='pb-2'>
-                <CardTitle className='flex items-center gap-2'>
-                  <User className='h-5 w-5 text-red-600' />
-                  Информация о клиенте
-                </CardTitle>
-              </CardHeader>
-              <CardContent>
-                <div className='grid gap-6 md:grid-cols-2'>
-                  <div>
-                    <div className='mb-4 space-y-1'>
-                      <p className='text-sm text-gray-500'>ФИО</p>
-                      <p className='font-medium'>
-                        {customerData.firstName} {customerData.lastName}
-                      </p>
-                    </div>
-                    <div className='space-y-1'>
-                      <p className='text-sm text-gray-500'>Дата регистрации</p>
-                      <p className='font-medium'>
-                        {customerData.registrationDate}
-                      </p>
-                    </div>
-                  </div>
-                  <div>
-                    <div className='mb-4 space-y-1'>
-                      <p className='text-sm text-gray-500'>Номер карты</p>
-                      <p className='font-medium'>{customerData.cardNumber}</p>
-                    </div>
-                    <div className='mb-4 space-y-1'>
-                      <p className='text-sm text-gray-500'>Срок действия</p>
-                      <p className='font-medium'>{customerData.expiryDate}</p>
-                    </div>
-                  </div>
-                </div>
-              </CardContent>
-            </Card>
-          </div>
-
-          <TransactionsTable />
-        </div>
-      </main>
-    </div>
-  );
-}
+export default function Customer() {
+  return <CustomerDashboard/>
+}
--- a/src/app/api-utlities/@types/index.ts
+++ b/src/app/api-utlities/@types/index.ts
@ -0,0 +1,55 @@
+export type Root<T> = { records: T[] };
+
+export interface Image {
+  url: string;
+  name: string;
+}
+
+export interface Select {
+  name: string;
+}
+
+export type Discount = Root<{
+  _name: string;
+  _opisanie: string;
+  _do: string;
+  _foto: Image[];
+}>;
+
+export type Job = Root<{
+  id: number;
+  _name: string;
+  _type: Select[];
+  _localtio: Select[];
+  _tags: Select[];
+}>;
+
+export type Partner = Root<{
+  id: number;
+  _name: string;
+  _image: Image[];
+}>;
+
+export type Station = Root<{
+  _name: string;
+  _opisanie: string;
+  _adress: string;
+  _chasyRaboty: Select;
+  _lat: number;
+  _long: number;
+  _avtomojka: boolean;
+  _dtCopy: boolean;
+  _ai92Copy: boolean;
+  _ai95Copy: boolean;
+  _z100Copy: boolean;
+  _propanCopy: boolean;
+  _zaryadnayaStanci: boolean;
+  _miniMarketCop: boolean;
+  _region: Select[];
+  _foto: Image[];
+}>;
+
+export type TextResponse = Root<{
+  _name: string;
+  _znachenie: string | null;
+}>;
--- a/src/app/api-utlities/@types/main.ts
+++ b/src/app/api-utlities/@types/main.ts
@ -0,0 +1,18 @@
+import {
+  presentDiscounts,
+  presentJobs,
+  presentPartners,
+  presentStations,
+} from '../presenters';
+
+export type Partners = ReturnType<typeof presentPartners>;
+export type Jobs = ReturnType<typeof presentJobs>;
+export type Discounts = ReturnType<typeof presentDiscounts>;
+export type Stations = ReturnType<typeof presentStations>;
+
+export type MainPageData = {
+  discounts: Discounts;
+  jobs: Jobs;
+  partners: Partners;
+  stations: Stations;
+};
--- a/src/app/api-utlities/presenters/index.ts
+++ b/src/app/api-utlities/presenters/index.ts
@ -0,0 +1,65 @@
+import { isEmpty } from 'lodash';
+
+import {
+  Discount,
+  Image,
+  Job,
+  Partner,
+  Station,
+  TextResponse,
+} from '../@types';
+
+export const presentImage = (images: Image[]) =>
+  isEmpty(images) ? null : `${process.env.TAYLOR_MEDIA_URL}/${images[0].url}`;
+
+export const presentPartners = (partners: Partner) =>
+  partners.records.map((record, index) => ({
+    id: index + 1,
+    name: record._name,
+    poster: presentImage(record._image),
+  }));
+
+export const presentJobs = (jobs: Job) =>
+  jobs.records.map((job, index) => ({
+    id: index + 1,
+    name: job._name,
+    tags: job._tags.map((tag) => tag.name),
+    location: !isEmpty(job._localtio) ? job._localtio[0].name : null,
+    type: !isEmpty(job._type) ? job._type[0].name : null,
+  }));
+
+export const presentDiscounts = (discounts: Discount) =>
+  discounts.records.map((discount, index) => ({
+    id: index + 1,
+    name: discount._name,
+    description: discount._opisanie,
+    expiresAt: discount._do,
+    image: presentImage(discount._foto),
+  }));
+
+export const presentStations = (stations: Station) =>
+  stations.records.map((station, index) => ({
+    id: index + 1,
+    name: station._name,
+    description: station._opisanie,
+    address: station._adress,
+    workingHours: station._chasyRaboty?.name || null,
+    latitude: station._lat,
+    longitude: station._long,
+    carWash: station._avtomojka || false,
+    ai92: station._dtCopy || false,
+    ai95: station._ai92Copy || false,
+    z100: station._ai95Copy || false,
+    propan: station._z100Copy || false,
+    electricCharge: station._propanCopy || false,
+    miniMarket: station._zaryadnayaStanci || false,
+    toilet: station._miniMarketCop || false,
+    region: !isEmpty(station._region) ? station._region[0].name : null,
+    image: presentImage(station._foto),
+  }));
+
+export const presentTexts = (texts: TextResponse) =>
+  texts.records.map((item) => ({
+    key: item._name,
+    value: item._znachenie,
+  }));
--- a/src/app/api-utlities/requests/common.ts
+++ b/src/app/api-utlities/requests/common.ts
@ -0,0 +1,78 @@
+export const stationsRequest = {
+  _azs: {
+    records: {
+      _name: true,
+      _opisanie: true,
+      _adress: true,
+      _chasyRaboty: {
+        name: true,
+      },
+      _lat: true,
+      _long: true,
+      _avtomojka: true,
+      _dtCopy: true, // ai92
+      _ai92Copy: true, // ai95
+      _ai95Copy: true, // z100
+      _z100Copy: true, // propan
+      _propanCopy: true, // electricCharge
+      _zaryadnayaStanci: true, // miniMarket
+      _miniMarketCop: true, // toilet
+      _region: {
+        name: true,
+      },
+      _foto: {
+        url: true,
+      },
+    },
+  },
+};
+
+export const partnersRequest = {
+  _partners: {
+    records: {
+      _name: true,
+      _image: {
+        url: true,
+      },
+    },
+  },
+};
+
+export const jobsRequest = {
+  _vacancies: {
+    records: {
+      _name: true,
+      _tags: {
+        name: true,
+      },
+      _type: {
+        name: true,
+      },
+      _localtio: {
+        name: true,
+      },
+    },
+  },
+};
+
+export const discountsRequest = {
+  _akcii: {
+    records: {
+      _name: true,
+      _opisanie: true,
+      _do: true,
+      _foto: {
+        url: true,
+      },
+    },
+  },
+};
+
+export const textsRequest = {
+  _kontentSajta: {
+    records: {
+      _name: true,
+      _znachenie: true,
+    },
+  },
+};
--- a/src/app/api-utlities/requests/main-page.request.ts
+++ b/src/app/api-utlities/requests/main-page.request.ts
@ -0,0 +1,13 @@
+import {
+  discountsRequest,
+  jobsRequest,
+  partnersRequest,
+  stationsRequest,
+} from './common';
+
+export const mainPageRequest = {
+  ...partnersRequest,
+  ...jobsRequest,
+  ...discountsRequest,
+  ...stationsRequest,
+};
--- a/src/app/api-utlities/utilities/oriyo.client.ts
+++ b/src/app/api-utlities/utilities/oriyo.client.ts
@ -0,0 +1,10 @@
+import { Axios } from 'axios';
+
+const oriyoClient = new Axios({
+  baseURL: process.env.ORIOYO_API_ENDPOINT || '',
+  headers: {
+    'Content-type': 'application/json',
+  },
+});
+
+export default oriyoClient;
--- a/src/app/api-utlities/utilities/taylor.client.ts
+++ b/src/app/api-utlities/utilities/taylor.client.ts
@ -0,0 +1,25 @@
+import { jsonToGraphQLQuery } from 'json-to-graphql-query';
+
+export const requestTaylor = async (query: object, variables?: object) => {
+  const body = JSON.stringify({
+    query: jsonToGraphQLQuery({ query }),
+    variables,
+  });
+
+  const response = await fetch(process.env.TAYLOR_API_ENDPOINT || '', {
+    body,
+    method: 'POST',
+    headers: {
+      Authorization: process.env.TAYLOR_API_TOKEN || '',
+      'Content-type': 'application/json',
+    },
+  });
+
+  const parsedResponse = await response.json();
+
+  if (parsedResponse.errors) {
+    throw parsedResponse.errors;
+  }
+
+  return parsedResponse;
+};
--- a/src/app/api/auth/login/route.ts
+++ b/src/app/api/auth/login/route.ts
@ -0,0 +1,50 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { z } from 'zod';
+
+import oriyoClient from '@/app/api-utlities/utilities/oriyo.client';
+
+import { loginFormSchema } from '@/entities/auth/model/validation/login-form.schema';
+
+import { validationErrorHandler } from '../../middlewares/error-handler.middleware';
+
+const routeHandler = async (req: NextRequest) => {
+  const body = await req.json();
+
+  const validatedBody = loginFormSchema
+    .merge(z.object({ type: z.enum(['bonus', 'corporate']) }))
+    .parse(body);
+
+  try {
+    const oriyoResponse = await oriyoClient.get('/client/login', {
+      params: {
+        type: validatedBody.type,
+        phone: validatedBody.phoneNumber,
+        uid: validatedBody.cardNumber,
+      },
+    });
+
+    const { token, card_id } = JSON.parse(oriyoResponse.data);
+
+    if (!token) {
+      return NextResponse.json({ error: 'Credentials error' }, { status: 401 });
+    }
+
+    const response = NextResponse.json({ success: true });
+
+    response.cookies.set(
+      `${validatedBody.type}__token`,
+      JSON.stringify({ token, card_id }),
+      {
+        path: '/',
+        maxAge: 2 * 60 * 60,
+      },
+    );
+
+    return response;
+  } catch (error) {
+    console.error('login error:', error);
+    return NextResponse.json({ error: 'Server error' }, { status: 500 });
+  }
+};
+
+export const POST = validationErrorHandler(routeHandler);
--- a/src/app/api/bonus/info/route.ts
+++ b/src/app/api/bonus/info/route.ts
@ -0,0 +1,31 @@
+import { NextRequest, NextResponse } from 'next/server';
+
+import oriyoClient from '@/app/api-utlities/utilities/oriyo.client';
+
+import { validationErrorHandler } from '../../middlewares/error-handler.middleware';
+
+export const routeHandler = async (req: NextRequest) => {
+  const bonusTokenData = req.cookies.get('bonus__token');
+
+  if (!bonusTokenData) {
+    return NextResponse.json(
+      { error: 'User does not have access' },
+      { status: 401 },
+    );
+  }
+
+  const { card_id, token } = JSON.parse(bonusTokenData.value);
+
+  const oriyoResponse = await oriyoClient.get('/client/info', {
+    params: {
+      card_id,
+      token,
+    },
+  });
+
+  return new Response(oriyoResponse.data, {
+    headers: { 'Content-Type': 'application/json' },
+  });
+};
+
+export const GET = validationErrorHandler(routeHandler);
--- a/src/app/api/middlewares/error-handler.middleware.ts
+++ b/src/app/api/middlewares/error-handler.middleware.ts
@ -0,0 +1,18 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { ZodError } from 'zod';
+
+export const validationErrorHandler =
+  (handler: Function) => async (req: NextRequest, res: NextResponse) => {
+    try {
+      return await handler(req, res);
+    } catch (error) {
+      if (error instanceof ZodError)
+        return NextResponse.json({ message: error.format() }, { status: 400 });
+
+      console.error(error);
+      return NextResponse.json(
+        { message: 'Server died for some reason' },
+        { status: 500 },
+      );
+    }
+  };
--- a/src/app/api/pages/main/route.ts
+++ b/src/app/api/pages/main/route.ts
@ -0,0 +1,28 @@
+import {
+  presentDiscounts,
+  presentJobs,
+  presentPartners,
+  presentStations,
+} from '@/app/api-utlities/presenters';
+import { mainPageRequest } from '@/app/api-utlities/requests/main-page.request';
+import { requestTaylor } from '@/app/api-utlities/utilities/taylor.client';
+
+import { validationErrorHandler } from '../../middlewares/error-handler.middleware';
+
+const routeHandler = async (request: Request) => {
+  const response = await requestTaylor(mainPageRequest);
+
+  return new Response(
+    JSON.stringify({
+      partners: presentPartners(response.data._partners),
+      jobs: presentJobs(response.data._vacancies),
+      discounts: presentDiscounts(response.data._akcii),
+      stations: presentStations(response.data._azs),
+    }),
+    {
+      headers: { 'Content-Type': 'application/json' },
+    },
+  );
+};
+
+export const GET = validationErrorHandler(routeHandler);
--- a/src/app/api/text/route.ts
+++ b/src/app/api/text/route.ts
@ -0,0 +1,14 @@
+import { presentTexts } from '@/app/api-utlities/presenters';
+import { textsRequest } from '@/app/api-utlities/requests/common';
+import { requestTaylor } from '@/app/api-utlities/utilities/taylor.client';
+
+export async function GET(request: Request) {
+  const response = await requestTaylor(textsRequest);
+
+  return new Response(
+    JSON.stringify(presentTexts(response.data._kontentSajta)),
+    {
+      headers: { 'Content-Type': 'application/json' },
+    },
+  );
+}
--- a/src/app/charity/page.tsx
+++ b/src/app/charity/page.tsx
@ -1,304 +1,5 @@
-import {
-  Calendar,
-  CheckCircle,
-  Heart,
-  Landmark,
-  MapPin,
-  Users,
-} from 'lucide-react';
-import Image from 'next/image';
+import { CharityPage } from "@/pages-templates/charity"

-import { Button } from '@/shared/shadcn-ui/button';
-import {
-  Card,
-  CardContent,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from '@/shared/shadcn-ui/card';
-
-import { CtaSection } from '@/widgets/cta-section';
-
-export const metadata = {
-  title: 'Благотворительность | GasNetwork - Сеть заправок в Таджикистане',
-  description:
-    'Благотворительные проекты и инициативы GasNetwork. Мы помогаем обществу и заботимся о будущем.',
-};
-
-export default function CharityPage() {
-  return (
-    <div className='flex min-h-screen flex-col'>
-      <main className='flex-1'>
-        {/* Hero Section */}
-        <section className='relative'>
-          <div className='relative h-[400px] w-full overflow-hidden'>
-            <Image
-              src='/placeholder.svg?height=500&width=1920&text=Благотворительный+фонд+GasNetwork'
-              alt='Благотворительный фонд GasNetwork'
-              width={1920}
-              height={500}
-              className='object-cover'
-              priority
-            />
-            <div className='absolute inset-0 flex items-center bg-gradient-to-r from-black/70 to-black/30'>
-              <div className='container mx-auto'>
-                <div className='max-w-2xl space-y-6 text-white'>
-                  <div className='inline-flex items-center justify-center rounded-full bg-red-600/20 p-2'>
-                    <Heart className='size-6 text-red-500' />
-                  </div>
-                  <h1 className='text-4xl font-bold tracking-tight sm:text-5xl md:text-6xl'>
-                    Благотворительный фонд GasNetwork
-                  </h1>
-                  <p className='text-xl text-gray-200'>
-                    Мы верим, что бизнес должен быть социально ответственным.
-                    Наш фонд поддерживает образование, здравоохранение и
-                    экологические инициативы в Таджикистане.
-                  </p>
-                </div>
-              </div>
-            </div>
-          </div>
-        </section>
-
-        {/* Mission Section */}
-        <section className='py-16'>
-          <div className='container mx-auto'>
-            <div className='grid items-center gap-12 md:grid-cols-2'>
-              <div>
-                <div className='mb-4 inline-flex items-center justify-center rounded-full bg-red-100 p-2'>
-                  <Heart className='h-6 w-6 text-red-600' />
-                </div>
-                <h2 className='mb-6 text-3xl font-bold tracking-tight sm:text-4xl'>
-                  Наша миссия
-                </h2>
-                <p className='mb-6 text-gray-600'>
-                  Благотворительный фонд GasNetwork был создан в 2020 году с
-                  целью поддержки социально значимых проектов в Таджикистане. Мы
-                  стремимся внести свой вклад в развитие общества и помочь тем,
-                  кто в этом нуждается.
-                </p>
-                <p className='mb-6 text-gray-600'>
-                  Наша миссия — создавать возможности для улучшения жизни людей
-                  через образование, здравоохранение, экологические инициативы и
-                  поддержку уязвимых групп населения.
-                </p>
-
-                <div className='space-y-4'>
-                  <div className='flex items-start'>
-                    <CheckCircle className='mr-3 h-6 w-6 flex-shrink-0 text-red-600' />
-                    <div>
-                      <h3 className='text-lg font-medium'>Прозрачность</h3>
-                      <p className='text-gray-600'>
-                        Мы публикуем ежегодные отчеты о всех наших проектах и
-                        расходах, обеспечивая полную прозрачность нашей
-                        деятельности.
-                      </p>
-                    </div>
-                  </div>
-                  <div className='flex items-start'>
-                    <CheckCircle className='mr-3 h-6 w-6 flex-shrink-0 text-red-600' />
-                    <div>
-                      <h3 className='text-lg font-medium'>Эффективность</h3>
-                      <p className='text-gray-600'>
-                        Мы тщательно выбираем проекты, которые могут принести
-                        максимальную пользу обществу и имеют долгосрочное
-                        влияние.
-                      </p>
-                    </div>
-                  </div>
-                  <div className='flex items-start'>
-                    <CheckCircle className='mr-3 h-6 w-6 flex-shrink-0 text-red-600' />
-                    <div>
-                      <h3 className='text-lg font-medium'>Сотрудничество</h3>
-                      <p className='text-gray-600'>
-                        Мы сотрудничаем с местными и международными
-                        организациями для достижения наибольшего эффекта от
-                        наших инициатив.
-                      </p>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div className='relative h-[500px] overflow-hidden rounded-xl shadow-xl'>
-                <Image
-                  src='/placeholder.svg?height=500&width=600&text=Наша+миссия'
-                  alt='Наша миссия'
-                  fill
-                  className='object-cover'
-                />
-              </div>
-            </div>
-          </div>
-        </section>
-
-        {/* Key Figures */}
-        <section className='bg-red-600 py-16 text-white'>
-          <div className='container mx-auto'>
-            <div className='mb-12 text-center'>
-              <h2 className='mb-4 text-3xl font-bold tracking-tight sm:text-4xl'>
-                Наш вклад в цифрах
-              </h2>
-              <p className='mx-auto max-w-2xl text-white/80'>
-                За время существования нашего фонда мы достигли значительных
-                результатов
-              </p>
-            </div>
-            <div className='grid grid-cols-1 gap-8 text-center md:grid-cols-3'>
-              <div className='space-y-2'>
-                <h3 className='text-4xl font-bold'>15+</h3>
-                <p className='text-white/80'>Реализованных проектов</p>
-              </div>
-              <div className='space-y-2'>
-                <h3 className='text-4xl font-bold'>1.2M</h3>
-                <p className='text-white/80'>Сомони пожертвований</p>
-              </div>
-              <div className='space-y-2'>
-                <h3 className='text-4xl font-bold'>5000+</h3>
-                <p className='text-white/80'>Людей получили помощь</p>
-              </div>
-            </div>
-          </div>
-        </section>
-
-        {/* Upcoming Events */}
-        <section className='bg-gray-50 py-16'>
-          <div className='container mx-auto'>
-            <div className='mb-12 text-center'>
-              <div className='mb-4 inline-flex items-center justify-center rounded-full bg-red-100 p-2'>
-                <Calendar className='h-6 w-6 text-red-600' />
-              </div>
-              <h2 className='mb-4 text-3xl font-bold tracking-tight sm:text-4xl'>
-                Предстоящие мероприятия
-              </h2>
-              <p className='mx-auto max-w-2xl text-gray-600'>
-                Присоединяйтесь к нашим благотворительным мероприятиям и внесите
-                свой вклад в общее дело
-              </p>
-            </div>
-
-            <div className='grid gap-6 md:grid-cols-3'>
-              {[
-                {
-                  title: 'Благотворительный марафон',
-                  description:
-                    'Ежегодный благотворительный марафон в поддержку детей с особыми потребностями.',
-                  date: '15 июня 2023',
-                  location: 'Парк Рудаки, Душанбе',
-                  image: '/placeholder.svg?height=200&width=300&text=Марафон',
-                },
-                {
-                  title: 'Экологическая акция',
-                  description:
-                    'Очистка берегов реки Варзоб от мусора и посадка деревьев.',
-                  date: '22 июля 2023',
-                  location: 'Река Варзоб, Душанбе',
-                  image:
-                    '/placeholder.svg?height=200&width=300&text=Экологическая+акция',
-                },
-                {
-                  title: 'Сбор школьных принадлежностей',
-                  description:
-                    'Сбор школьных принадлежностей для детей из малообеспеченных семей к новому учебному году.',
-                  date: '1-20 августа 2023',
-                  location: 'Все заправки GasNetwork',
-                  image:
-                    '/placeholder.svg?height=200&width=300&text=Школьные+принадлежности',
-                },
-              ].map((event, index) => (
-                <Card key={index} className='overflow-hidden'>
-                  <div className='relative h-48 w-full'>
-                    <Image
-                      src={event.image || '/placeholder.svg'}
-                      alt={event.title}
-                      fill
-                      className='object-cover'
-                    />
-                  </div>
-                  <CardHeader>
-                    <CardTitle>{event.title}</CardTitle>
-                  </CardHeader>
-                  <CardContent className='space-y-4'>
-                    <p className='text-gray-600'>{event.description}</p>
-                    <div className='flex items-center text-sm text-gray-500'>
-                      <Calendar className='mr-2 h-4 w-4' />
-                      {event.date}
-                    </div>
-                    <div className='flex items-center text-sm text-gray-500'>
-                      <MapPin className='mr-2 h-4 w-4' />
-                      {event.location}
-                    </div>
-                  </CardContent>
-                  <CardFooter>
-                    <Button className='w-full bg-red-600 hover:bg-red-700'>
-                      Принять участие
-                    </Button>
-                  </CardFooter>
-                </Card>
-              ))}
-            </div>
-          </div>
-        </section>
-
-        {/* How to Help */}
-        <section className='py-16'>
-          <div className='container mx-auto'>
-            <div className='mb-12 text-center'>
-              <div className='mb-4 inline-flex items-center justify-center rounded-full bg-red-100 p-2'>
-                <Users className='h-6 w-6 text-red-600' />
-              </div>
-              <h2 className='mb-4 text-3xl font-bold tracking-tight sm:text-4xl'>
-                Как вы можете помочь
-              </h2>
-              <p className='mx-auto max-w-2xl text-gray-600'>
-                Есть много способов внести свой вклад в наши благотворительные
-                инициативы
-              </p>
-            </div>
-
-            <div className='grid gap-3 md:grid-cols-2 md:gap-6 lg:grid-cols-4'>
-              {[
-                {
-                  title: 'Сделать пожертвование',
-                  description:
-                    'Ваше пожертвование поможет нам реализовать больше проектов и помочь большему количеству людей.',
-                  icon: <Landmark className='h-10 w-10 text-red-600' />,
-                },
-                {
-                  title: 'Стать волонтером',
-                  description:
-                    'Присоединяйтесь к нашей команде волонтеров и помогайте нам в реализации благотворительных проектов.',
-                  icon: <Users className='h-10 w-10 text-red-600' />,
-                },
-                {
-                  title: 'Участвовать в мероприятиях',
-                  description:
-                    'Принимайте участие в наших благотворительных мероприятиях и акциях.',
-                  icon: <Calendar className='h-10 w-10 text-red-600' />,
-                },
-                {
-                  title: 'Распространять информацию',
-                  description:
-                    'Расскажите о нашем фонде и его деятельности своим друзьям и знакомым.',
-                  icon: <Heart className='h-10 w-10 text-red-600' />,
-                },
-              ].map((item, index) => (
-                <Card key={index} className='text-center'>
-                  <CardHeader>
-                    <div className='mb-4 flex justify-center'>{item.icon}</div>
-                    <CardTitle className='break-words hyphens-auto'>
-                      {item.title}
-                    </CardTitle>
-                  </CardHeader>
-                  <CardContent>
-                    <p className='text-gray-600'>{item.description}</p>
-                  </CardContent>
-                </Card>
-              ))}
-            </div>
-          </div>
-        </section>
-        <CtaSection />
-      </main>
-    </div>
-  );
-}
+export default function Charity() {
+  return <CharityPage />
+}
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@ -1,7 +1,10 @@
 import type { Metadata } from 'next';
 import { Inter } from 'next/font/google';

+import { textControlApi } from '@/shared/language/api/text-control.api';
 import { Providers } from '@/shared/providers/providers';
+import { makeStore } from '@/shared/store';
+import { TextItem } from '@/shared/types/text.types';

 import { Footer } from '@/widgets/footer';
 import { Header } from '@/widgets/header/ui';
@ -16,20 +19,26 @@ export const metadata: Metadata = {
    'Качественное топливо, удобное расположение и отличный сервис для наших клиентов',
 };

-export default function RootLayout({
+export default async function RootLayout({
  children,
 }: Readonly<{
  children: React.ReactNode;
 }>) {
+  const store = makeStore();
+
+  const response = await store.dispatch(
+    textControlApi.endpoints.fetchText.initiate(),
+  );
+
  return (
    <html
-      lang='en'
+      lang='ru'
      suppressHydrationWarning
      className='scroll-smooth'
      style={{ scrollBehavior: 'smooth' }}
    >
-      <body className={`${inter.className} antialiased`}>
-        <Providers>
+      <body className={`${inter.className} antialiased min-w-2xs`}>
+        <Providers textItems={response.data as TextItem[]}>
          <Header />
          {children}
          <Footer />
--- a/src/app/login/page.tsx
+++ b/src/app/login/page.tsx
@ -1,5 +1,5 @@
-import LoginPage from "@/pages-templates/login";
+import LoginPage from '@/pages-templates/login';

 export default function Login() {
-  return <LoginPage/>
-}
+  return <LoginPage />;
+}
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@ -8,16 +8,23 @@ import { PromotionsSection } from '@/widgets/promotions-section';
 import { StatsSection } from '@/widgets/stats-section';
 import { VacanciesSection } from '@/widgets/vacancies-section';

-export default function Home() {
+import { MainPageData } from './api-utlities/@types/main';
+
+export default async function Home() {
+  const mainPageData = (await fetch(
+    `${process.env.NEXT_PUBLIC_BASE_URL}/api/pages/main`,
+    { method: 'GET' },
+  ).then((res) => res.json())) as MainPageData;
+
  return (
    <main>
      <HeroSection />
      <StatsSection />
-      <MapSection />
+      <MapSection stations={mainPageData.stations} />
      <AboutSection />
-      <PromotionsSection />
-      <VacanciesSection />
-      <PartnersSection />
+      <PromotionsSection discounts={mainPageData.discounts} />
+      <VacanciesSection jobs={mainPageData.jobs} />
+      <PartnersSection partners={mainPageData.partners} />
      <CharitySection />
      <CtaSection />
    </main>
--- a/src/entities/auth/api/login.api.ts
+++ b/src/entities/auth/api/login.api.ts
@ -0,0 +1,23 @@
+import { baseAPI } from '@/shared/api/base-api';
+
+import { LoginParams, LoginResponse } from '../model/contracts/login.contract';
+
+export const authenticationApi = baseAPI.injectEndpoints({
+  endpoints: (builder) => ({
+    login: builder.query<LoginResponse, LoginParams>({
+      query: (data) => {
+        return {
+          method: 'POST',
+          body: {
+            type: data.type,
+            phoneNumber: data.phoneNumber,
+            cardNumber: data.cardNumber,
+          },
+          url: '/auth/login',
+        };
+      },
+    }),
+  }),
+});
+
+export const { useLazyLoginQuery } = authenticationApi;
--- a/src/entities/auth/index.ts
+++ b/src/entities/auth/index.ts
@ -0,0 +1 @@
+export { useLazyLoginQuery } from './api/login.api';
--- a/src/entities/auth/model/contracts/login.contract.ts
+++ b/src/entities/auth/model/contracts/login.contract.ts
@ -0,0 +1,9 @@
+import { LoginFormData } from '@/entities/auth/model/validation/login-form.schema';
+
+export interface LoginResponse {
+  success: boolean;
+}
+
+export interface LoginParams extends LoginFormData {
+  type: 'bonus' | 'corporate';
+}
--- a/src/entities/auth/model/types/index.ts
+++ b/src/entities/auth/model/types/index.ts
@ -0,0 +1,7 @@
+export interface LoginData {
+  card_id: number;
+  created_at: string;
+  phone: string;
+  token: string;
+  uid: string;
+}
--- a/src/entities/auth/model/validation/login-form.schema.ts
+++ b/src/entities/auth/model/validation/login-form.schema.ts
@ -0,0 +1,20 @@
+import { z } from 'zod';
+
+export const loginFormSchema = z.object({
+  phoneNumber: z
+    .string()
+    .trim()
+    .regex(/^[0-9+\-() ]*$/, {
+      message:
+        'Номер телефона может содержать только цифры, пробелы и следующие символы: + - ( )',
+    })
+    .min(5, 'Номер телефона слишком короткий. Введите полный номер телефона')
+    .max(13, 'Номер телефона не может быть длиннее 13 символов'),
+  cardNumber: z
+    .string()
+    .min(6, 'Неверный номер карты. Введите полный номер карты')
+    .max(20, 'Номер карты не может быть длиннее 20 символов')
+    .trim(),
+});
+
+export type LoginFormData = z.infer<typeof loginFormSchema>;
--- a/src/entities/bonus/api/bonus.api.ts
+++ b/src/entities/bonus/api/bonus.api.ts
@ -0,0 +1,17 @@
+import { baseAPI } from '@/shared/api/base-api';
+
+import { ClientInfo } from '../model/types/bonus-client-info.type';
+
+export const bonusApi = baseAPI.injectEndpoints({
+  endpoints: (builder) => ({
+    fetchMyBonusInfo: builder.query<ClientInfo, any>({
+      query: () => {
+        return {
+          url: '/bonus/info',
+        };
+      },
+    }),
+  }),
+});
+
+export const { useFetchMyBonusInfoQuery } = bonusApi;
--- a/src/entities/bonus/model/types/bonus-client-info.type.ts
+++ b/src/entities/bonus/model/types/bonus-client-info.type.ts
@ -0,0 +1,8 @@
+export interface ClientInfo {
+  card_id: number;
+  fullname: string;
+  cardno: string;
+  reg_date: string;
+  end_date: string;
+  bonuses: string;
+}
--- a/src/features/auth/login-form/model/login-form.schema.ts
+++ b/src/features/auth/login-form/model/login-form.schema.ts
@ -1,18 +0,0 @@
-import { z } from 'zod';
-
-export const loginFormSchema = z.object({
-  phoneNumber: z
-    .string()
-    .trim()
-    .regex(/^[0-9+\-() ]*$/, {
-      message:
-        'Phone number can only contain numbers, spaces, and the following symbols: + - ( )',
-    })
-    .refine((val) => !val || val.length >= 5, {
-      message:
-        'Phone number is too short. Please enter a complete phone number',
-    }),
-  cardNumber: z.string().min(16).trim(),
-});
-
-export type LoginFormData = z.infer<typeof loginFormSchema>;
--- a/src/features/auth/login-form/ui/login-form.tsx
+++ b/src/features/auth/login-form/ui/login-form.tsx
@ -5,7 +5,10 @@ import { useRouter } from 'next/navigation';
 import { useForm } from 'react-hook-form';
 import { toast } from 'sonner';

-import { Button } from '@/shared/shadcn-ui/button';
+import { useLazyLoginQuery } from '@/entities/auth';
+
+import { SubmitButton } from '@/shared/components/submit-button';
+import { useTextController } from '@/shared/language/hooks/use-text-controller';
 import {
  Form,
  FormControl,
@ -16,18 +19,20 @@ import {
 } from '@/shared/shadcn-ui/form';
 import { Input } from '@/shared/shadcn-ui/input';

-import { LoginFormData, loginFormSchema } from '../model/login-form.schema';
-import { useLanguage } from '@/shared/language';
+import {
+  LoginFormData,
+  loginFormSchema,
+} from '../../../../entities/auth/model/validation/login-form.schema';

 interface LoginFormProps {
-  //   onSubmit: (data: any) => Promise<void>;
+  type: 'bonus' | 'corporate';
 }

-export const LoginForm = ({}: LoginFormProps) => {
-  const {t} = useLanguage()
+export const LoginForm = ({ type }: LoginFormProps) => {
+  const { t } = useTextController();

  const router = useRouter();
-  // const [login, results] = useLoginMutation();
+  const [login, { isLoading: isLoginLoading }] = useLazyLoginQuery();

  const form = useForm<LoginFormData>({
    resolver: zodResolver(loginFormSchema),
@ -38,34 +43,26 @@ export const LoginForm = ({}: LoginFormProps) => {
  });

  const onSubmit = async (data: LoginFormData) => {
-    // const response = await login(data).unwrap();
-    // const user = response.data;
-    // dispatch(
-    //   setCredentials({
-    //     user: {
-    //       accessToken: user.accessToken,
-    //       affiliateId: user.affiliateId,
-    //       email: user.email,
-    //       id: user.id,
-    //       role: user.role,
-    //       username: user.username,
-    //     },
-    //   }),
-    // );
-    toast.success('Logged in successfully!');
+    await login({ ...data, type }).unwrap();

-    router.push('/customer-dashboard');
+    toast.success('Logged in successfully!');
+    router.push(
+      type === 'bonus' ? '/customer-dashboard' : '/corporate-dashboard',
+    );
  };

  return (
-    <Form {...form} >
-      <form onSubmit={form.handleSubmit(onSubmit)} className='space-y-4 mx-auto'>
+    <Form {...form}>
+      <form
+        onSubmit={form.handleSubmit(onSubmit)}
+        className='mx-auto space-y-4'
+      >
        <FormField
          control={form.control}
          name='phoneNumber'
          render={({ field }) => (
-            <FormItem>
-              <FormLabel>{t("auth.phoneNumber")}</FormLabel>
+            <FormItem className='flex flex-col'>
+              <FormLabel>{t('auth.phoneNumber')}</FormLabel>
              <FormControl>
                <Input
                  type='tel'
@ -82,8 +79,8 @@ export const LoginForm = ({}: LoginFormProps) => {
          control={form.control}
          name='cardNumber'
          render={({ field }) => (
-            <FormItem>
-              <FormLabel>{t("auth.cardNumber")}</FormLabel>
+            <FormItem className='flex flex-col'>
+              <FormLabel>{t('auth.cardNumber')}</FormLabel>
              <FormControl>
                <Input
                  type='text'
@ -95,16 +92,12 @@ export const LoginForm = ({}: LoginFormProps) => {
            </FormItem>
          )}
        />
-        <Button
-          // isLoading={results.isLoading}
-          // title='Login'
+        <SubmitButton
+          isLoading={isLoginLoading}
          type='submit'
          className='w-full'
-          // variant={'default'}
-          // disabled={loading}
-        >
-          Войти
-        </Button>
+          disabled={isLoginLoading}
+        />
      </form>
    </Form>
  );
--- a/src/features/map/model/index.ts
+++ b/src/features/map/model/index.ts
@ -0,0 +1,4 @@
+export type Point = {
+  id: number;
+  coordinates: [number, number];
+};
--- a/src/features/map/ui/gas-station-map.tsx
+++ b/src/features/map/ui/gas-station-map.tsx
@ -10,7 +10,9 @@ import {
 } from 'lucide-react';
 import { useEffect, useRef, useState } from 'react';

-import { useLanguage } from '@/shared/language';
+import { Stations } from '@/app/api-utlities/@types/main';
+
+import { useTextController } from '@/shared/language/hooks/use-text-controller';
 import { Badge } from '@/shared/shadcn-ui/badge';
 import { Button } from '@/shared/shadcn-ui/button';
 import {
@ -168,8 +170,14 @@ const allFilters = [
 // Extract unique cities from stations
 const allCities = [...new Set(stations.map((station) => station.city))].sort();

-export default function GasStationMap() {
-  const { t } = useLanguage();
+interface GasStationMapProps {
+  stations: Stations;
+}
+
+export default function GasStationMap({
+  stations: _stations,
+}: GasStationMapProps) {
+  const { t } = useTextController();
  const mapRef = useRef<HTMLDivElement>(null);
  const [activeFilters, setActiveFilters] = useState<string[]>([]);
  const [activeCities, setActiveCities] = useState<string[]>([]);
--- a/src/features/map/ui/yandex-map.tsx
+++ b/src/features/map/ui/yandex-map.tsx
@ -0,0 +1,38 @@
+'use client';
+
+import { Map, Placemark, YMaps } from '@pbe/react-yandex-maps';
+
+import { Point } from '../model';
+
+type YandexMapProps = {
+  points: Point[];
+};
+
+export const YandexMap = ({ points }: YandexMapProps) => {
+  return (
+    <YMaps
+      query={{
+        apikey: process.env.NEXT_PUBLIC_YANDEX_MAP_API_KEY,
+        lang: 'ru_RU',
+      }}
+    >
+      <Map
+        defaultState={{
+          center: points[0].coordinates || [55.751574, 37.573856], // центр карты,
+          zoom: 11,
+        }}
+        className='rounded-md shadow-lg'
+        options={{
+          suppressMapOpenBlock: true,
+          suppressObsoleteBrowserNotifier: true,
+        }}
+        width={'100%'}
+        height={'500px'}
+      >
+        {points.map((point) => (
+          <Placemark key={point.id} geometry={point.coordinates} />
+        ))}
+      </Map>
+    </YMaps>
+  );
+};
--- a/src/pages-templates/(dashboard)/corporate-dashboard/index.tsx
+++ b/src/pages-templates/(dashboard)/corporate-dashboard/index.tsx
@ -0,0 +1,201 @@
+'use client';
+
+import { subMonths } from 'date-fns';
+import { Building2, LogOut, Wallet } from 'lucide-react';
+import { useState } from 'react';
+
+import { useTextController } from '@/shared/language/hooks/use-text-controller';
+import { Button } from '@/shared/shadcn-ui/button';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/shared/shadcn-ui/card';
+
+import { TransactionsTable } from '@/widgets/transactions-table';
+
+// import { CardsList } from '@/widgets/cards-list';
+
+// Sample company data
+const companyData = {
+  companyName: 'ООО «ТаджикТранс»',
+  numberOfCards: 12,
+  fund: 25000,
+  overdraft: 5000,
+  totalFund: 30000,
+  registrationDate: '10.03.2019',
+};
+
+// Sample transaction data
+const generateTransactions = () => {
+  const stations = [
+    'АЗС Душанбе-Центр',
+    'АЗС Душанбе-Запад',
+    'АЗС Душанбе-Восток',
+    'АЗС Худжанд',
+    'АЗС Куляб',
+  ];
+
+  const products = [
+    { name: 'ДТ', price: 8.5 },
+    { name: 'АИ-92', price: 9.2 },
+    { name: 'АИ-95', price: 10.5 },
+    { name: 'Z-100 Power', price: 11.8 },
+    { name: 'Пропан', price: 6.3 },
+  ];
+
+  const transactions = [];
+
+  // Generate 50 random transactions over the last 6 months
+  for (let i = 0; i < 50; i++) {
+    const date = subMonths(new Date(), Math.random() * 6);
+    const station = stations[Math.floor(Math.random() * stations.length)];
+    const product = products[Math.floor(Math.random() * products.length)];
+    const quantity = Math.floor(Math.random() * 40) + 10; // 10-50 liters
+    const cost = product.price;
+    const total = quantity * cost;
+
+    transactions.push({
+      id: i + 1,
+      date,
+      station,
+      product: product.name,
+      quantity,
+      cost,
+      total,
+    });
+  }
+
+  // Sort by date (newest first)
+  return transactions.sort((a, b) => b.date.getTime() - a.date.getTime());
+};
+
+const transactions = generateTransactions();
+
+export function CorporateDashboard() {
+  const [startDate, setStartDate] = useState<Date | undefined>(
+    subMonths(new Date(), 1),
+  );
+  const [endDate, setEndDate] = useState<Date | undefined>(new Date());
+  const [filteredTransactions, setFilteredTransactions] =
+    useState(transactions);
+
+  // Filter transactions by date range
+  const filterTransactions = () => {
+    if (!startDate || !endDate) return;
+
+    const filtered = transactions.filter((transaction) => {
+      const transactionDate = new Date(transaction.date);
+      return transactionDate >= startDate && transactionDate <= endDate;
+    });
+
+    setFilteredTransactions(filtered);
+  };
+
+  const { t } = useTextController();
+
+  return (
+    <div className='flex min-h-screen flex-col px-2.5'>
+      <main className='flex-1 py-10'>
+        <div className='container mx-auto max-w-6xl'>
+          <div className='mb-8 flex items-center justify-between'>
+            <h1 className='text-3xl font-bold'>{t('corporate.pageTitle')}</h1>
+            <Button variant='outline' className='gap-2'>
+              <LogOut className='h-4 w-4' />
+              {t('corporate.logoutButton')}
+            </Button>
+          </div>
+
+          <div className='mb-10 grid gap-3 md:grid-cols-3 md:gap-6'>
+            {/* Company Card */}
+            <Card className='md:col-span-2'>
+              <CardHeader className='pb-2'>
+                <CardTitle className='flex items-center gap-2'>
+                  <Building2 className='h-5 w-5 text-red-600' />
+                  {t('corporate.companyCard.title')}
+                </CardTitle>
+              </CardHeader>
+              <CardContent>
+                <div className='grid gap-6 md:grid-cols-2'>
+                  <div>
+                    <div className='mb-4 space-y-1'>
+                      <p className='text-sm text-gray-500'>
+                        {t('corporate.companyCard.companyNameLabel')}
+                      </p>
+                      <p className='font-medium'>{companyData.companyName}</p>
+                    </div>
+                    <div className='mb-4 space-y-1'>
+                      <p className='text-sm text-gray-500'>
+                        {t('corporate.companyCard.cardsCountLabel')}
+                      </p>
+                      <p className='font-medium'>{companyData.numberOfCards}</p>
+                    </div>
+                    <div className='space-y-1'>
+                      <p className='text-sm text-gray-500'>
+                        {t('corporate.companyCard.registrationDateLabel')}
+                      </p>
+                      <p className='font-medium'>
+                        {companyData.registrationDate}
+                      </p>
+                    </div>
+                  </div>
+                  <div>
+                    <div className='mb-4 space-y-1'>
+                      <p className='text-sm text-gray-500'>
+                        {t('corporate.companyCard.fundLabel')}
+                      </p>
+                      <p className='font-medium'>
+                        {companyData.fund.toLocaleString()}{' '}
+                        {t('corporate.currency')}
+                      </p>
+                    </div>
+                    <div className='mb-4 space-y-1'>
+                      <p className='text-sm text-gray-500'>
+                        {t('corporate.companyCard.overdraftLabel')}
+                      </p>
+                      <p className='font-medium'>
+                        {companyData.overdraft.toLocaleString()}{' '}
+                        {t('corporate.currency')}
+                      </p>
+                    </div>
+                  </div>
+                </div>
+              </CardContent>
+            </Card>
+
+            {/* Fund Card */}
+            <Card className='bg-gradient-to-br from-red-600 to-red-800 text-white'>
+              <CardHeader>
+                <CardTitle className='flex items-center gap-2'>
+                  <Wallet className='h-5 w-5' />
+                  {t('corporate.fundCard.title')}
+                </CardTitle>
+                <CardDescription className='text-white/80'>
+                  {t('corporate.fundCard.description')}
+                </CardDescription>
+              </CardHeader>
+              <CardContent>
+                <div className='text-center'>
+                  <p className='mb-2 text-4xl font-bold'>
+                    {companyData.totalFund.toLocaleString()}
+                  </p>
+                  <p className='text-white/80'>
+                    {t('corporate.fundCard.currency')}
+                  </p>
+                </div>
+              </CardContent>
+            </Card>
+          </div>
+
+          {/* <CardsList totalCards={companyData.numberOfCards} /> */}
+
+          {/* Transactions */}
+
+          <TransactionsTable />
+        </div>
+      </main>
+    </div>
+  );
+}
--- a/src/pages-templates/(dashboard)/customer-dashboard/index.tsx
+++ b/src/pages-templates/(dashboard)/customer-dashboard/index.tsx
@ -0,0 +1,124 @@
+'use client';
+
+import { ArrowUpRight, Clock, CreditCard, LogOut, User } from 'lucide-react';
+
+import { useFetchMyBonusInfoQuery } from '@/entities/bonus/api/bonus.api';
+
+import { useTextController } from '@/shared/language/hooks/use-text-controller';
+import { Button } from '@/shared/shadcn-ui/button';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/shared/shadcn-ui/card';
+
+import { TransactionsTable } from '@/widgets/transactions-table';
+
+export function CustomerDashboard() {
+  const { t } = useTextController();
+
+  const { data, isLoading } = useFetchMyBonusInfoQuery({});
+
+  return (
+    <div className='flex min-h-screen flex-col px-2.5'>
+      <main className='flex-1 py-10'>
+        <div className='container mx-auto max-w-6xl'>
+          <div className='mb-8 flex items-center justify-between'>
+            <h1 className='text-3xl font-bold'>{t('customer.pageTitle')}</h1>
+            <Button variant='outline' className='gap-2'>
+              <LogOut className='h-4 w-4' />
+              {t('customer.logoutButton')}
+            </Button>
+          </div>
+
+          <div className='mb-10 grid gap-3 md:grid-cols-3 md:gap-6'>
+            <Card className='bg-gradient-to-br from-red-600 to-red-800 text-white'>
+              {!data || isLoading ? (
+                // TODO: Bunyod please add loader here
+                <>Loader here</>
+              ) : (
+                <>
+                  <CardHeader>
+                    <CardTitle className='flex items-center gap-2'>
+                      <CreditCard className='h-5 w-5' />
+                      {t('customer.bonusCard.title')}
+                    </CardTitle>
+                    <CardDescription className='text-white/80'>
+                      {t('customer.bonusCard.description')}
+                    </CardDescription>
+                  </CardHeader>
+                  <CardContent>
+                    <div className='text-center'>
+                      <p className='mb-2 text-4xl font-bold'>{data.bonuses}</p>
+                      <p className='text-white/80'>
+                        {t('customer.bonusCard.points')}
+                      </p>
+                    </div>
+                    <div className='mt-6 flex items-center justify-between'>
+                      <div className='flex items-center gap-1 text-sm text-white/80'>
+                        <Clock className='h-4 w-4' />
+                        <span>
+                          {t('customer.bonusCard.validUntil')}{' '}
+                          {new Date(data.end_date).toLocaleDateString('en-GB')}
+                        </span>
+                      </div>
+                      <ArrowUpRight className='h-5 w-5 text-white/60' />
+                    </div>
+                  </CardContent>
+                </>
+              )}
+            </Card>
+
+            {/* Bonus Card */}
+            {/* Customer Card */}
+            <Card className='md:col-span-2'>
+              <CardHeader className='pb-2'>
+                <CardTitle className='flex items-center gap-2'>
+                  <User className='h-5 w-5 text-red-600' />
+                  {t('customer.infoCard.title')}
+                </CardTitle>
+              </CardHeader>
+              <CardContent>
+                {!data || isLoading ? (
+                  // TODO: Bunyod please add loader here
+                  <>Loader here</>
+                ) : (
+                  <div className='grid gap-6 md:grid-cols-2'>
+                    <div>
+                      <div className='mb-4 space-y-1'>
+                        <p className='text-sm text-gray-500'>
+                          {t('customer.infoCard.regDateLabel')}
+                        </p>
+                        <p className='font-medium'>{data.fullname}</p>
+                      </div>
+                      <div className='space-y-1'>
+                        <p className='text-sm text-gray-500'>
+                          {t('customer.infoCard.regDateLabel')}
+                        </p>
+                        <p className='font-medium'>
+                          {new Date(data.reg_date).toLocaleDateString('en-GB')}
+                        </p>
+                      </div>
+                    </div>
+                    <div>
+                      <div className='mb-4 space-y-1'>
+                        <p className='text-sm text-gray-500'>
+                          {t('customer.infoCard.cardNumberLabel')}
+                        </p>
+                        <p className='font-medium'>{data.cardno}</p>
+                      </div>
+                    </div>
+                  </div>
+                )}
+              </CardContent>
+            </Card>
+          </div>
+
+          <TransactionsTable />
+        </div>
+      </main>
+    </div>
+  );
+}
--- a/src/pages-templates/about/index.tsx
+++ b/src/pages-templates/about/index.tsx
@ -1,26 +1,19 @@
 'use client';

-import {
-  Award,
-  Fuel,
-  History,
-  MapPin,
-  Star,
-  Target,
-  Users,
-} from 'lucide-react';
+import { Fuel, History, MapPin, Star, Target, Users } from 'lucide-react';
 import Image from 'next/image';

 // import { useTranslation } from 'next-i18next';

 import AnimatedCounter from '@/shared/components/animated-counter';
-import { useLanguage } from '@/shared/language';
+import { useTextController } from '@/shared/language/hooks/use-text-controller';
 import { Button } from '@/shared/shadcn-ui/button';
 import { Card, CardContent } from '@/shared/shadcn-ui/card';

 import { CompanyTimeline } from '@/widgets/about-page/company-timeline';
 import { StationGallery } from '@/widgets/about-page/station-gallery';
 import { CtaSection } from '@/widgets/cta-section';
+import Container from '@/shared/shadcn-ui/conteiner';

 export const metadata = {
  title: 'about.metadata.title',
@ -28,7 +21,7 @@ export const metadata = {
 };

 export default function AboutPage() {
-  const { t } = useLanguage();
+  const { t } = useTextController();

  return (
    <div className='flex min-h-screen flex-col'>
@ -44,7 +37,7 @@ export default function AboutPage() {
              className='object-cover'
              priority
            />
-            <div className='absolute inset-0 flex items-center bg-gradient-to-r from-black/70 to-black/30'>
+            <div className='absolute inset-0 flex items-center bg-gradient-to-r from-black/70 to-black/30 px-2'>
              <div className='container mx-auto'>
                <div className='max-w-2xl space-y-4 text-white'>
                  <h1 className='text-4xl font-bold tracking-tight sm:text-5xl md:text-6xl'>
@ -60,55 +53,57 @@ export default function AboutPage() {
        </section>

        {/* Company Overview */}
-        <section className='py-16'>
-          <div className='container mx-auto'>
-            <div className='grid items-center gap-12 md:grid-cols-2'>
-              <div>
-                <div className='mb-4 inline-flex items-center justify-center rounded-full bg-red-100 p-2'>
-                  <Fuel className='h-6 w-6 text-red-600' />
-                </div>
-                <h2 className='mb-6 text-3xl font-bold tracking-tight sm:text-4xl'>
-                  {t('about.overview.title')}
-                </h2>
-                <p className='mb-6 text-gray-600'>
-                  {t('about.overview.description1')}
-                </p>
-                <p className='mb-6 text-gray-600'>
-                  {t('about.overview.description2')}
-                </p>
-                <p className='mb-6 text-gray-600'>
-                  {t('about.overview.description3')}
-                </p>
+        <Container>    
+          <section className='py-16'>
+            <div className='container mx-auto'>
+              <div className='grid items-center gap-12 md:grid-cols-2'>
+                <div>
+                  <div className='mb-4 inline-flex items-center justify-center rounded-full bg-red-100 p-2'>
+                    <Fuel className='h-6 w-6 text-red-600' />
+                  </div>
+                  <h2 className='mb-6 text-3xl font-bold tracking-tight sm:text-4xl'>
+                    {t('about.overview.title')}
+                  </h2>
+                  <p className='mb-6 text-gray-600'>
+                    {t('about.overview.description1')}
+                  </p>
+                  <p className='mb-6 text-gray-600'>
+                    {t('about.overview.description2')}
+                  </p>
+                  <p className='mb-6 text-gray-600'>
+                    {t('about.overview.description3')}
+                  </p>

-                <div className='mb-6 grid grid-cols-2 gap-4'>
-                  {[0, 1, 2, 3].map((index) => (
-                    <div key={index} className='flex items-start'>
-                      <div className='mt-1 flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full bg-red-600'>
-                        <span className='text-xs text-white'>✓</span>
+                  <div className='mb-6 grid md:grid-cols-2 gap-4 grid-cols-1'>
+                    {[0, 1, 2, 3].map((index) => (
+                      <div key={index} className='flex items-start'>
+                        <div className='mt-1 flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full bg-red-600'>
+                          <span className='text-xs text-white'>✓</span>
+                        </div>
+                        <div className='ml-3'>
+                          <h3 className='text-lg font-medium'>
+                            {t(`about.overview.benefits.${index}.title`)}
+                          </h3>
+                          <p className='text-gray-600'>
+                            {t(`about.overview.benefits.${index}.description`)}
+                          </p>
+                        </div>
                      </div>
-                      <div className='ml-3'>
-                        <h3 className='text-lg font-medium'>
-                          {t(`about.overview.benefits.${index}.title`)}
-                        </h3>
-                        <p className='text-gray-600'>
-                          {t(`about.overview.benefits.${index}.description`)}
-                        </p>
-                      </div>
-                    </div>
-                  ))}
+                    ))}
+                  </div>
+                </div>
+                <div className='relative h-[500px] overflow-hidden rounded-xl shadow-xl'>
+                  <Image
+                    src='/placeholder.svg?height=500&width=600&text=Главный+офис'
+                    alt={t('about.overview.imageAlt')}
+                    fill
+                    className='object-cover'
+                  />
                </div>
-              </div>
-              <div className='relative h-[500px] overflow-hidden rounded-xl shadow-xl'>
-                <Image
-                  src='/placeholder.svg?height=500&width=600&text=Главный+офис'
-                  alt={t('about.overview.imageAlt')}
-                  fill
-                  className='object-cover'
-                />
              </div>
            </div>
-          </div>
-        </section>
+          </section>
+        </Container>

        {/* Stats Section */}
        <section className='bg-red-600 py-16 text-white'>
@ -121,7 +116,7 @@ export default function AboutPage() {
                {t('about.stats.subtitle')}
              </p>
            </div>
-            <div className='grid grid-cols-2 gap-8 text-center md:grid-cols-4'>
+            <div className='grid grid-cols-1 sm:grid-cols-2 gap-8 text-center md:grid-cols-4'>
              {[0, 1, 2, 3].map((index) => (
                <div key={index} className='space-y-2'>
                  <h3 className='text-4xl font-bold'>
@ -147,176 +142,190 @@ export default function AboutPage() {
        {/* Our History */}
        <section className='py-16'>
          <div className='container mx-auto'>
-            <div className='mb-12 flex flex-col items-center justify-center text-center'>
-              <div className='mb-4 inline-flex items-center justify-center rounded-full bg-red-100 p-2'>
-                <History className='h-6 w-6 text-red-600' />
+            <Container>
+              <div className='mb-12 flex flex-col items-center justify-center text-center'>
+                <div className='mb-4 inline-flex items-center justify-center rounded-full bg-red-100 p-2'>
+                  <History className='h-6 w-6 text-red-600' />
+                </div>
+                <h2 className='mb-4 text-3xl font-bold tracking-tight sm:text-4xl'>
+                  {t('about.history.title')}
+                </h2>
+                <p className='max-w-2xl text-gray-600'>
+                  {t('about.history.subtitle')}
+                </p>
              </div>
-              <h2 className='mb-4 text-3xl font-bold tracking-tight sm:text-4xl'>
-                {t('about.history.title')}
-              </h2>
-              <p className='max-w-2xl text-gray-600'>
-                {t('about.history.subtitle')}
-              </p>
-            </div>
+            </Container>
+
+            <Container>
+              <CompanyTimeline />
+            </Container>

-            <CompanyTimeline />
          </div>
        </section>

        {/* Our Stations */}
-        <section className='bg-gray-50 py-16'>
-          <div className='container mx-auto'>
-            <div className='mb-12 flex flex-col items-center justify-center text-center'>
-              <div className='mb-4 inline-flex items-center justify-center rounded-full bg-red-100 p-2'>
-                <MapPin className='h-6 w-6 text-red-600' />
+        <Container>
+          <section className='bg-gray-50 py-16'>
+            <div className='container mx-auto'>
+              <div className='mb-12 flex flex-col items-center justify-center text-center'>
+                <div className='mb-4 inline-flex items-center justify-center rounded-full bg-red-100 p-2'>
+                  <MapPin className='h-6 w-6 text-red-600' />
+                </div>
+                <h2 className='mb-4 text-3xl font-bold tracking-tight sm:text-4xl'>
+                  {t('about.stations.title')}
+                </h2>
+                <p className='max-w-2xl text-gray-600'>
+                  {t('about.stations.subtitle')}
+                </p>
              </div>
-              <h2 className='mb-4 text-3xl font-bold tracking-tight sm:text-4xl'>
-                {t('about.stations.title')}
-              </h2>
-              <p className='max-w-2xl text-gray-600'>
-                {t('about.stations.subtitle')}
-              </p>
-            </div>

-            <StationGallery />
+              <StationGallery />

-            <div className='mt-12 text-center'>
-              <p className='mx-auto mb-6 max-w-2xl text-gray-600'>
-                {t('about.stations.description')}
-              </p>
-              <Button className='bg-red-600 hover:bg-red-700'>
-                {t('about.stations.buttonText')}{' '}
-                <MapPin className='ml-2 h-4 w-4' />
-              </Button>
+              <div className='mt-12 text-center'>
+                <p className='mx-auto mb-6 max-w-2xl text-gray-600'>
+                  {t('about.stations.description')}
+                </p>
+                <Button className='bg-red-600 hover:bg-red-700'>
+                  {t('about.stations.buttonText')}{' '}
+                  <MapPin className='ml-2 h-4 w-4' />
+                </Button>
+              </div>
            </div>
-          </div>
-        </section>
+          </section>
+        </Container>

        {/* Our Values */}
-        <section className='py-16'>
-          <div className='container mx-auto'>
-            <div className='mb-12 flex flex-col items-center justify-center text-center'>
-              <div className='mb-4 inline-flex items-center justify-center rounded-full bg-red-100 p-2'>
-                <Target className='h-6 w-6 text-red-600' />
+        <Container>
+          <section className='py-16'>
+            <div className='container mx-auto'>
+              <div className='mb-12 flex flex-col items-center justify-center text-center'>
+                <div className='mb-4 inline-flex items-center justify-center rounded-full bg-red-100 p-2'>
+                  <Target className='h-6 w-6 text-red-600' />
+                </div>
+                <h2 className='mb-4 text-3xl font-bold tracking-tight sm:text-4xl'>
+                  {t('about.values.title')}
+                </h2>
+                <p className='max-w-2xl text-gray-600'>
+                  {t('about.values.subtitle')}
+                </p>
              </div>
-              <h2 className='mb-4 text-3xl font-bold tracking-tight sm:text-4xl'>
-                {t('about.values.title')}
-              </h2>
-              <p className='max-w-2xl text-gray-600'>
-                {t('about.values.subtitle')}
-              </p>
-            </div>

-            <div className='grid gap-8 md:grid-cols-3'>
-              {[0, 1, 2].map((index) => (
-                <Card
-                  key={index}
-                  className='overflow-hidden transition-all hover:shadow-lg'
-                >
-                  <CardContent className='p-6'>
-                    <div className='mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-red-100'>
-                      <Star className='h-6 w-6 text-red-600' />
-                    </div>
-                    <h3 className='mb-2 text-xl font-bold'>
-                      {t(`about.values.items.${index}.title`)}
-                    </h3>
-                    <p className='text-gray-600'>
-                      {t(`about.values.items.${index}.description`)}
-                    </p>
-                  </CardContent>
-                </Card>
-              ))}
+              <div className='grid gap-8 md:grid-cols-3'>
+                {[0, 1, 2].map((index) => (
+                  <Card
+                    key={index}
+                    className='overflow-hidden transition-all hover:shadow-lg'
+                  >
+                    <CardContent className='p-6'>
+                      <div className='mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-red-100'>
+                        <Star className='h-6 w-6 text-red-600' />
+                      </div>
+                      <h3 className='mb-2 text-xl font-bold'>
+                        {t(`about.values.items.${index}.title`)}
+                      </h3>
+                      <p className='text-gray-600'>
+                        {t(`about.values.items.${index}.description`)}
+                      </p>
+                    </CardContent>
+                  </Card>
+                ))}
+              </div>
            </div>
-          </div>
-        </section>
+          </section>
+        </Container>

        {/* Our Team */}
-        <section className='bg-gray-50 py-16'>
-          <div className='container mx-auto'>
-            <div className='mb-12 flex flex-col items-center justify-center text-center'>
-              <div className='mb-4 inline-flex items-center justify-center rounded-full bg-red-100 p-2'>
-                <Users className='h-6 w-6 text-red-600' />
-              </div>
-              <h2 className='mb-4 text-3xl font-bold tracking-tight sm:text-4xl'>
-                {t('about.team.title')}
-              </h2>
-              <p className='max-w-2xl text-gray-600'>
-                {t('about.team.subtitle')}
-              </p>
-            </div>
-
-            <div className='grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-4'>
-              {[0, 1, 2, 3].map((index) => (
-                <div
-                  key={index}
-                  className='overflow-hidden rounded-lg bg-white shadow-md transition-transform hover:scale-105'
-                >
-                  <div className='relative h-64 w-full'>
-                    <Image
-                      src={`/placeholder.svg?height=300&width=300&text=${t(`about.team.members.${index}.name`)}`}
-                      alt={t(`about.team.members.${index}.name`)}
-                      fill
-                      className='object-cover'
-                    />
-                  </div>
-                  <div className='p-4 text-center'>
-                    <h3 className='text-lg font-bold'>
-                      {t(`about.team.members.${index}.name`)}
-                    </h3>
-                    <p className='text-gray-600'>
-                      {t(`about.team.members.${index}.position`)}
-                    </p>
-                  </div>
+        <Container>
+          <section className='bg-gray-50 py-16'>
+            <div className='container mx-auto'>
+              <div className='mb-12 flex flex-col items-center justify-center text-center'>
+                <div className='mb-4 inline-flex items-center justify-center rounded-full bg-red-100 p-2'>
+                  <Users className='h-6 w-6 text-red-600' />
                </div>
-              ))}
+                <h2 className='mb-4 text-3xl font-bold tracking-tight sm:text-4xl'>
+                  {t('about.team.title')}
+                </h2>
+                <p className='max-w-2xl text-gray-600'>
+                  {t('about.team.subtitle')}
+                </p>
+              </div>
+
+              <div className='grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-4'>
+                {[0, 1, 2, 3].map((index) => (
+                  <div
+                    key={index}
+                    className='overflow-hidden rounded-lg bg-white shadow-md transition-transform hover:scale-105'
+                  >
+                    <div className='relative h-64 w-full'>
+                      <Image
+                        src={`/placeholder.svg?height=300&width=300&text=${t(`about.team.members.${index}.name`)}`}
+                        alt={t(`about.team.members.${index}.name`)}
+                        fill
+                        className='object-cover'
+                      />
+                    </div>
+                    <div className='p-4 text-center'>
+                      <h3 className='text-lg font-bold'>
+                        {t(`about.team.members.${index}.name`)}
+                      </h3>
+                      <p className='text-gray-600'>
+                        {t(`about.team.members.${index}.position`)}
+                      </p>
+                    </div>
+                  </div>
+                ))}
+              </div>
            </div>
-          </div>
-        </section>
+          </section>
+        </Container>

        {/* Testimonials */}
-        <section className='py-16'>
-          <div className='container mx-auto'>
-            <div className='mb-12 flex flex-col items-center justify-center text-center'>
-              <div className='mb-4 inline-flex items-center justify-center rounded-full bg-red-100 p-2'>
-                <Star className='h-6 w-6 text-red-600' />
-              </div>
-              <h2 className='mb-4 text-3xl font-bold tracking-tight sm:text-4xl'>
-                {t('about.testimonials.title')}
-              </h2>
-              <p className='max-w-2xl text-gray-600'>
-                {t('about.testimonials.subtitle')}
-              </p>
-            </div>
+        <Container>

-            <div className='grid gap-8 md:grid-cols-3'>
-              {[0, 1, 2].map((index) => (
-                <Card
-                  key={index}
-                  className='overflow-hidden transition-all hover:shadow-lg'
-                >
-                  <CardContent className='p-6'>
-                    <div className='mb-4 flex'>
-                      {Array(5)
-                        .fill(0)
-                        .map((_, i) => (
-                          <Star
-                            key={i}
-                            className={`h-5 w-5 ${i < Number(t(`about.testimonials.items.${index}.rating`)) ? 'fill-yellow-400 text-yellow-400' : 'text-gray-300'}`}
-                          />
-                        ))}
-                    </div>
-                    <p className='mb-4 text-gray-600 italic'>
-                      "{t(`about.testimonials.items.${index}.text`)}"
-                    </p>
-                    <p className='font-semibold'>
-                      {t(`about.testimonials.items.${index}.name`)}
-                    </p>
-                  </CardContent>
-                </Card>
-              ))}
+          <section className='py-16'>
+            <div className='container mx-auto'>
+              <div className='mb-12 flex flex-col items-center justify-center text-center'>
+                <div className='mb-4 inline-flex items-center justify-center rounded-full bg-red-100 p-2'>
+                  <Star className='h-6 w-6 text-red-600' />
+                </div>
+                <h2 className='mb-4 text-3xl font-bold tracking-tight sm:text-4xl'>
+                  {t('about.testimonials.title')}
+                </h2>
+                <p className='max-w-2xl text-gray-600'>
+                  {t('about.testimonials.subtitle')}
+                </p>
+              </div>
+
+              <div className='grid gap-8 md:grid-cols-3'>
+                {[0, 1, 2].map((index) => (
+                  <Card
+                    key={index}
+                    className='overflow-hidden transition-all hover:shadow-lg'
+                  >
+                    <CardContent className='p-6'>
+                      <div className='mb-4 flex'>
+                        {Array(5)
+                          .fill(0)
+                          .map((_, i) => (
+                            <Star
+                              key={i}
+                              className={`h-5 w-5 ${i < Number(t(`about.testimonials.items.${index}.rating`)) ? 'fill-yellow-400 text-yellow-400' : 'text-gray-300'}`}
+                            />
+                          ))}
+                      </div>
+                      <p className='mb-4 text-gray-600 italic'>
+                        "{t(`about.testimonials.items.${index}.text`)}"
+                      </p>
+                      <p className='font-semibold'>
+                        {t(`about.testimonials.items.${index}.name`)}
+                      </p>
+                    </CardContent>
+                  </Card>
+                ))}
+              </div>
            </div>
-          </div>
-        </section>
+          </section>
+        </Container>

        <CtaSection />
      </main>
--- a/src/pages-templates/charity/index.tsx
+++ b/src/pages-templates/charity/index.tsx
@ -0,0 +1,288 @@
+'use client';
+
+import {
+  Calendar,
+  CheckCircle,
+  Heart,
+  Landmark,
+  MapPin,
+  Users,
+} from 'lucide-react';
+import Image from 'next/image';
+
+import { useTextController } from '@/shared/language/hooks/use-text-controller';
+import { Button } from '@/shared/shadcn-ui/button';
+import {
+  Card,
+  CardContent,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from '@/shared/shadcn-ui/card';
+
+import { CtaSection } from '@/widgets/cta-section';
+import Container from '@/shared/shadcn-ui/conteiner';
+
+export const metadata = {
+  title: 'Благотворительность | GasNetwork - Сеть заправок в Таджикистане',
+  description:
+    'Благотворительные проекты и инициативы GasNetwork. Мы помогаем обществу и заботимся о будущем.',
+};
+
+export function CharityPage() {
+  const { t } = useTextController();
+
+  return (
+    <div className='flex min-h-screen flex-col'>
+      <main className='flex-1'>
+        {/* Hero Section */}
+        <section className='relative'>
+          <div className='relative h-[400px] w-full overflow-hidden'>
+            <Image
+              src='/placeholder.svg?height=500&width=1920&text=Благотворительный+фонд+GasNetwork'
+              alt={t('charity.hero.imageAlt')}
+              width={1920}
+              height={500}
+              className='object-cover'
+              priority
+            />
+            <div className='absolute inset-0 flex items-center bg-gradient-to-r from-black/70 to-black/30'>
+              <Container>
+                <div className='container mx-auto'>
+                  <div className='max-w-2xl space-y-6 text-white'>
+                    <div className='inline-flex items-center justify-center rounded-full bg-red-600/20 p-2'>
+                      <Heart className='size-6 text-red-500' />
+                    </div>
+                    <h1 className='text-3xl font-bold tracking-tight sm:text-5xl md:text-6xl'>
+                      {t('charity.hero.title')}
+                    </h1>
+                    <p className='text-lg sm:text-xl text-gray-200'>
+                      {t('charity.hero.subtitle')}
+                    </p>
+                  </div>
+                </div>
+              </Container>
+            </div>
+          </div>
+        </section>
+
+        {/* Mission Section */}
+        <Container>
+          <section className='py-16'>
+            <div className='container mx-auto'>
+              <div className='grid items-center gap-12 md:grid-cols-2'>
+                <div>
+                  <div className='mb-4 inline-flex items-center justify-center rounded-full bg-red-100 p-2'>
+                    <Heart className='h-6 w-6 text-red-600' />
+                  </div>
+                  <h2 className='mb-6 text-3xl font-bold tracking-tight sm:text-4xl'>
+                    {t('charity.mission.title')}
+                  </h2>
+                  <p className='mb-6 text-gray-600'>
+                    {t('charity.mission.description1')}
+                  </p>
+                  <p className='mb-6 text-gray-600'>
+                    {t('charity.mission.description2')}
+                  </p>
+
+                  <div className='space-y-4'>
+                    {[0, 1, 2].map((index) => (
+                      <div key={index} className='flex items-start'>
+                        <CheckCircle className='mr-3 h-6 w-6 flex-shrink-0 text-red-600' />
+                        <div>
+                          <h3 className='text-lg font-medium'>
+                            {t(`charity.mission.principles.${index}.title`)}
+                          </h3>
+                          <p className='text-gray-600'>
+                            {t(`charity.mission.principles.${index}.description`)}
+                          </p>
+                        </div>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+                <div className='relative h-[500px] overflow-hidden rounded-xl shadow-xl'>
+                  <Image
+                    src='/placeholder.svg?height=500&width=600&text=Наша+миссия'
+                    alt={t('charity.mission.imageAlt')}
+                    fill
+                    className='object-cover'
+                  />
+                </div>
+              </div>
+            </div>
+          </section>
+        </Container>
+
+        {/* Key Figures */}
+        <section className='bg-red-600 py-16 text-white'>
+          <div className='container mx-auto'>
+            <div className='mb-12 text-center'>
+              <h2 className='mb-4 text-3xl font-bold tracking-tight sm:text-4xl'>
+                {t('charity.stats.title')}
+              </h2>
+              <p className='mx-auto max-w-2xl text-white/80'>
+                {t('charity.stats.subtitle')}
+              </p>
+            </div>
+            <div className='grid grid-cols-1 gap-8 text-center md:grid-cols-3'>
+              {[0, 1, 2].map((index) => (
+                <div key={index} className='space-y-2'>
+                  <h3 className='text-4xl font-bold'>
+                    {t(`charity.stats.items.${index}.value`)}
+                  </h3>
+                  <p className='text-white/80'>
+                    {t(`charity.stats.items.${index}.label`)}
+                  </p>
+                </div>
+              ))}
+            </div>
+          </div>
+        </section>
+
+        {/* Upcoming Events */}
+        <Container>
+          <section className='bg-gray-50 py-16'>
+            <div className='container mx-auto'>
+              <div className='mb-12 text-center'>
+                <div className='mb-4 inline-flex items-center justify-center rounded-full bg-red-100 p-2'>
+                  <Calendar className='h-6 w-6 text-red-600' />
+                </div>
+                <h2 className='mb-4 text-3xl font-bold tracking-tight sm:text-4xl'>
+                  {t('charity.events.title')}
+                </h2>
+                <p className='mx-auto max-w-2xl text-gray-600'>
+                  {t('charity.events.subtitle')}
+                </p>
+              </div>
+
+              <div className='grid gap-6 md:grid-cols-3'>
+                {[
+                  {
+                    title: 'Благотворительный марафон',
+                    description:
+                      'Ежегодный благотворительный марафон в поддержку детей с особыми потребностями.',
+                    date: '15 июня 2023',
+                    location: 'Парк Рудаки, Душанбе',
+                    image: '/placeholder.svg?height=200&width=300&text=Марафон',
+                  },
+                  {
+                    title: 'Экологическая акция',
+                    description:
+                      'Очистка берегов реки Варзоб от мусора и посадка деревьев.',
+                    date: '22 июля 2023',
+                    location: 'Река Варзоб, Душанбе',
+                    image:
+                      '/placeholder.svg?height=200&width=300&text=Экологическая+акция',
+                  },
+                  {
+                    title: 'Сбор школьных принадлежностей',
+                    description:
+                      'Сбор школьных принадлежностей для детей из малообеспеченных семей к новому учебному году.',
+                    date: '1-20 августа 2023',
+                    location: 'Все заправки GasNetwork',
+                    image:
+                      '/placeholder.svg?height=200&width=300&text=Школьные+принадлежности',
+                  },
+                ].map((event, index) => (
+                  <Card key={index} className='overflow-hidden flex flex-col justify-between'>
+                    <div>
+                      <div className='relative h-48 w-full'>
+                        <Image
+                          src={event.image || '/placeholder.svg'}
+                          alt={event.title}
+                          fill
+                          className='object-cover'
+                        />
+                      </div>
+                      <CardHeader>
+                        <CardTitle className='text-xl lg:text-2xl'>{event.title}</CardTitle>
+                      </CardHeader>
+                      <CardContent className='space-y-4'>
+                        <p className='text-gray-600'>{event.description}</p>
+                        <div className='flex items-center text-sm text-gray-500'>
+                          <Calendar className='mr-2 h-4 w-4' />
+                          {event.date}
+                        </div>
+                        <div className='flex items-center text-sm text-gray-500'>
+                          <MapPin className='mr-2 h-4 w-4' />
+                          {event.location}
+                        </div>
+                      </CardContent>
+                    </div>
+                    <CardFooter>
+                      <Button className='w-full bg-red-600 hover:bg-red-700'>
+                        {t(`charity.events.button`)}
+                      </Button>
+                    </CardFooter>
+                  </Card>
+                ))}
+              </div>
+            </div>
+          </section>
+        </Container>
+
+        {/* How to Help */}
+        <Container>
+          <section className='py-16'>
+            <div className='container mx-auto'>
+              <div className='mb-12 text-center'>
+                <div className='mb-4 inline-flex items-center justify-center rounded-full bg-red-100 p-2'>
+                  <Users className='h-6 w-6 text-red-600' />
+                </div>
+                <h2 className='mb-4 text-3xl font-bold tracking-tight sm:text-4xl'>
+                  {t('charity.help.title')}
+                </h2>
+                <p className='mx-auto max-w-2xl text-gray-600'>
+                  {t('charity.help.subtitle')}
+                </p>
+              </div>
+
+              <div className='grid gap-3 md:grid-cols-2 md:gap-6 lg:grid-cols-4'>
+                {[
+                  {
+                    title: 'Сделать пожертвование',
+                    description:
+                      'Ваше пожертвование поможет нам реализовать больше проектов и помочь большему количеству людей.',
+                    icon: <Landmark className='h-10 w-10 text-red-600' />,
+                  },
+                  {
+                    title: 'Стать волонтером',
+                    description:
+                      'Присоединяйтесь к нашей команде волонтеров и помогайте нам в реализации благотворительных проектов.',
+                    icon: <Users className='h-10 w-10 text-red-600' />,
+                  },
+                  {
+                    title: 'Участвовать в мероприятиях',
+                    description:
+                      'Принимайте участие в наших благотворительных мероприятиях и акциях.',
+                    icon: <Calendar className='h-10 w-10 text-red-600' />,
+                  },
+                  {
+                    title: 'Распространять информацию',
+                    description:
+                      'Расскажите о нашем фонде и его деятельности своим друзьям и знакомым.',
+                    icon: <Heart className='h-10 w-10 text-red-600' />,
+                  },
+                ].map((item, index) => (
+                  <Card key={index} className='text-center'>
+                    <CardHeader>
+                      <div className='mb-4 flex justify-center'>{item.icon}</div>
+                      <CardTitle className='break-words hyphens-auto'>
+                        {item.title}
+                      </CardTitle>
+                    </CardHeader>
+                    <CardContent>
+                      <p className='text-gray-600'>{item.description}</p>
+                    </CardContent>
+                  </Card>
+                ))}
+              </div>
+            </div>
+          </section>
+        </Container>
+        <CtaSection />
+      </main>
+    </div>
+  );
+}
--- a/src/pages-templates/clients/certificates/index.tsx
+++ b/src/pages-templates/clients/certificates/index.tsx
@ -3,12 +3,13 @@
 import { Download, Eye } from 'lucide-react';
 import Image from 'next/image';

-import { useLanguage } from '@/shared/language';
+import { useTextController } from '@/shared/language/hooks/use-text-controller';
 import { Button } from '@/shared/shadcn-ui/button';
 import { Card, CardContent } from '@/shared/shadcn-ui/card';
+import Container from '@/shared/shadcn-ui/conteiner';

 export function CertificatesPage() {
-  const { t } = useLanguage();
+  const { t } = useTextController();

  // This data would typically come from an API or CMS
  // We're keeping it as-is since it's dynamic content
@ -64,7 +65,7 @@ export function CertificatesPage() {
  ];

  return (
-    <>
+    <Container>
      <main className='container mx-auto py-10'>
        <div className='mb-10 text-center'>
          <h1 className='mb-4 text-4xl font-bold'>{t('certificates.title')}</h1>
@ -122,6 +123,6 @@ export function CertificatesPage() {
          ))}
        </div>
      </main>
-    </>
+    </Container>
  );
 }
--- a/src/pages-templates/clients/index.tsx
+++ b/src/pages-templates/clients/index.tsx
@ -1,11 +1,13 @@
-"use client"
+'use client';

 import Image from 'next/image';

+import { useTextController } from '@/shared/language/hooks/use-text-controller';
+
 import { BenefitsSection } from '@/widgets/clients/ui/benefits-section';
 import { ServicesOverviewSection } from '@/widgets/clients/ui/services-overview-section';
 import { CtaSection } from '@/widgets/cta-section';
-import { useLanguage } from '@/shared/language';
+import Container from '@/shared/shadcn-ui/conteiner';

 export const metadata = {
  title: 'Клиентам | GasNetwork - Сеть заправок в Таджикистане',
@ -14,8 +16,7 @@ export const metadata = {
 };

 export function ClientsPage() {
-
-  const { t } = useLanguage()
+  const { t } = useTextController();

  return (
    <div className='flex min-h-screen flex-col'>
@ -32,16 +33,18 @@ export function ClientsPage() {
              priority
            />
            <div className='absolute inset-0 flex items-center bg-gradient-to-r from-black/70 to-black/30'>
-              <div className='container mx-auto'>
-                <div className='max-w-2xl space-y-4 text-white'>
-                  <h1 className='text-4xl font-bold tracking-tight sm:text-5xl md:text-6xl'>
-                    {t('clients.title')}
-                  </h1>
-                  <p className='text-lg text-gray-200'>
-                    {t('clients.description')}
-                  </p>
+              <Container>
+                <div className='container mx-auto'>
+                  <div className='max-w-2xl space-y-4 text-white'>
+                    <h1 className='text-4xl font-bold tracking-tight sm:text-5xl md:text-6xl'>
+                      {t('clients.title')}
+                    </h1>
+                    <p className='text-lg text-gray-200'>
+                      {t('clients.description')}
+                    </p>
+                  </div>
                </div>
-              </div>
+              </Container>
            </div>
          </div>
        </section>
--- a/src/pages-templates/clients/loyalty/index.tsx
+++ b/src/pages-templates/clients/loyalty/index.tsx
@ -3,10 +3,11 @@
 import { Check, Percent } from 'lucide-react';
 import Image from 'next/image';

-import { useLanguage } from '@/shared/language';
+import { useTextController } from '@/shared/language/hooks/use-text-controller';
 import { Card, CardContent } from '@/shared/shadcn-ui/card';

 import { CtaSection } from '@/widgets/cta-section';
+import Container from '@/shared/shadcn-ui/conteiner';

 export const metadata = {
  title: 'Программа лояльности | GasNetwork - Сеть заправок в Таджикистане',
@ -15,7 +16,7 @@ export const metadata = {
 };

 export function LoyaltyPage() {
-  const { t } = useLanguage();
+  const { t } = useTextController();

  return (
    <div className='flex min-h-screen flex-col'>
@ -32,294 +33,299 @@ export function LoyaltyPage() {
              priority
            />
            <div className='absolute inset-0 flex items-center bg-gradient-to-r from-black/70 to-black/30'>
-              <div className='container mx-auto'>
-                <div className='max-w-2xl space-y-4 text-white'>
-                  <h1 className='text-4xl font-bold tracking-tight sm:text-5xl md:text-6xl'>
-                    {t('clients.loyalty.title')}
-                  </h1>
-                  <p className='text-lg text-gray-200'>
-                    {t('clients.loyalty.description')}
+            <Container>
+                <div className='container mx-auto'>
+                  <div className='max-w-2xl space-y-4 text-white'>
+                    <h1 className='text-4xl font-bold tracking-tight sm:text-5xl md:text-6xl'>
+                      {t('clients.loyalty.title')}
+                    </h1>
+                    <p className='text-lg text-gray-200'>
+                      {t('clients.loyalty.description')}
+                    </p>
+                  </div>
+                </div>
+            </Container>
+            </div>
+          </div>
+        </section>
+
+        <Container>
+          {/* Program Overview */}
+          <section className='py-16'>
+            <div className='container mx-auto'>
+              <div className='grid items-center gap-12 md:grid-cols-2'>
+                <div>
+                  <div className='mb-4 inline-flex items-center justify-center rounded-full bg-red-100 p-2'>
+                    <Percent className='h-6 w-6 text-red-600' />
+                  </div>
+                  <h2 className='mb-6 text-3xl font-bold tracking-tight sm:text-4xl'>
+                    {t('clients.loyalty.programm.about')}
+                  </h2>
+                  <p className='mb-6 text-gray-600'>
+                    {t('clients.loyalty.programm.about-description')}
+                  </p>
+                  <p className='mb-6 text-gray-600'>
+                    {t('clients.loyalty.programm.about-description-2')}
+                  </p>
+
+                  <div className='space-y-4'>
+                    <div className='flex items-start'>
+                      <div className='mt-1 flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full bg-red-600'>
+                        <span className='text-xs text-white'>✓</span>
+                      </div>
+                      <div className='ml-3'>
+                        <h3 className='text-lg font-medium'>
+                          {t('clients.loyalty.programm.conditions-1')}
+                        </h3>
+                        <p className='text-gray-600'>
+                          {t('clients.loyalty.programm.conditions.description-1')}
+                        </p>
+                      </div>
+                    </div>
+                    <div className='flex items-start'>
+                      <div className='mt-1 flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full bg-red-600'>
+                        <span className='text-xs text-white'>✓</span>
+                      </div>
+                      <div className='ml-3'>
+                        <h3 className='text-lg font-medium'>
+                          {t('clients.loyalty.programm.conditions-2')}
+                        </h3>
+                        <p className='text-gray-600'>
+                          {t('clients.loyalty.programm.conditions.description-2')}
+                        </p>
+                      </div>
+                    </div>
+                    <div className='flex items-start'>
+                      <div className='mt-1 flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full bg-red-600'>
+                        <span className='text-xs text-white'>✓</span>
+                      </div>
+                      <div className='ml-3'>
+                        <h3 className='text-lg font-medium'>
+                          {t('clients.loyalty.programm.conditions-3')}
+                        </h3>
+                        <p className='text-gray-600'>
+                          {t('clients.loyalty.programm.conditions.description-3')}
+                        </p>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div className='relative h-[400px] overflow-hidden rounded-xl shadow-xl'>
+                  <Image
+                    src='/placeholder.svg?height=400&width=600&text=Программа+лояльности'
+                    alt='Программа лояльности'
+                    fill
+                    className='object-cover'
+                  />
+                </div>
+              </div>
+            </div>
+          </section>
+
+          {/* How It Works */}
+          <section className='bg-gray-50 py-16'>
+            <div className='container mx-auto'>
+              <div className='mb-12 text-center'>
+                <h2 className='mb-4 text-3xl font-bold tracking-tight sm:text-4xl'>
+                  {t('clients.loyalty.works.title')}
+                </h2>
+                <p className='mx-auto max-w-2xl text-gray-600'>
+                  {t('clients.loyalty.works.description')}
+                </p>
+              </div>
+
+              <div className='grid gap-8 md:grid-cols-4'>
+                <div className='text-center'>
+                  <div className='mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-red-600 text-2xl font-bold text-white'>
+                    1
+                  </div>
+                  <h3 className='mb-2 text-xl font-bold'>
+                    {t('clients.loyalty.works.stage-1')}
+                  </h3>
+                  <p className='text-gray-600'>
+                    {t('clients.loyalty.works.stage.description-1')}
+                  </p>
+                </div>
+                <div className='text-center'>
+                  <div className='mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-red-600 text-2xl font-bold text-white'>
+                    2
+                  </div>
+                  <h3 className='mb-2 text-xl font-bold'>
+                    {t('clients.loyalty.works.stage-2')}
+                  </h3>
+                  <p className='text-gray-600'>
+                    {t('clients.loyalty.works.stage.description-2')}
+                  </p>
+                </div>
+                <div className='text-center'>
+                  <div className='mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-red-600 text-2xl font-bold text-white'>
+                    3
+                  </div>
+                  <h3 className='mb-2 text-xl font-bold'>
+                    {t('clients.loyalty.works.stage-3')}
+                  </h3>
+                  <p className='text-gray-600'>
+                    {t('clients.loyalty.works.stage.description-3')}
+                  </p>
+                </div>
+                <div className='text-center'>
+                  <div className='mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-red-600 text-2xl font-bold text-white'>
+                    4
+                  </div>
+                  <h3 className='mb-2 text-xl font-bold'>
+                    {t('clients.loyalty.works.stage-4')}
+                  </h3>
+                  <p className='text-gray-600'>
+                    {t('clients.loyalty.works.stage.description-4')}
                  </p>
                </div>
              </div>
            </div>
-          </div>
-        </section>
-
-        {/* Program Overview */}
-        <section className='py-16'>
-          <div className='container mx-auto'>
-            <div className='grid items-center gap-12 md:grid-cols-2'>
-              <div>
-                <div className='mb-4 inline-flex items-center justify-center rounded-full bg-red-100 p-2'>
-                  <Percent className='h-6 w-6 text-red-600' />
-                </div>
-                <h2 className='mb-6 text-3xl font-bold tracking-tight sm:text-4xl'>
-                  {t('clients.loyalty.programm.about')}
+          </section>
+          
+          {/* Loyalty Levels */}
+          <section className='py-16'>
+            <div className='container mx-auto'>
+              <div className='mb-12 text-center'>
+                <h2 className='mb-4 text-3xl font-bold tracking-tight sm:text-4xl'>
+                  {t('clients.loyalty.works.levels.title')}
                </h2>
-                <p className='mb-6 text-gray-600'>
-                  {t('clients.loyalty.programm.about-description')}
-                </p>
-                <p className='mb-6 text-gray-600'>
-                  {t('clients.loyalty.programm.about-description-2')}
+                <p className='mx-auto max-w-2xl text-gray-600'>
+                  {t('clients.loyalty.works.levels.description')}
                </p>
+              </div>

-                <div className='space-y-4'>
-                  <div className='flex items-start'>
-                    <div className='mt-1 flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full bg-red-600'>
-                      <span className='text-xs text-white'>✓</span>
-                    </div>
-                    <div className='ml-3'>
-                      <h3 className='text-lg font-medium'>
-                        {t('clients.loyalty.programm.conditions-1')}
-                      </h3>
-                      <p className='text-gray-600'>
-                        {t('clients.loyalty.programm.conditions.description-1')}
+              <div className='grid gap-8 md:grid-cols-3'>
+                <Card className='overflow-hidden border-t-4 border-t-gray-400 transition-all hover:shadow-lg'>
+                  <CardContent className='p-6'>
+                    <h3 className='mb-4 text-center text-2xl font-bold'>
+                      {t('clients.loyalty.works.levels.card-1.title')}
+                    </h3>
+                    <div className='mb-6 text-center'>
+                      <span className='text-4xl font-bold'>
+                        {t('clients.loyalty.works.levels.card-1.percent')}
+                      </span>
+                      <p className='text-sm text-gray-600'>
+                        {t('clients.loyalty.works.levels.card.mark')}
                      </p>
                    </div>
-                  </div>
-                  <div className='flex items-start'>
-                    <div className='mt-1 flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full bg-red-600'>
-                      <span className='text-xs text-white'>✓</span>
-                    </div>
-                    <div className='ml-3'>
-                      <h3 className='text-lg font-medium'>
-                        {t('clients.loyalty.programm.conditions-2')}
-                      </h3>
-                      <p className='text-gray-600'>
-                        {t('clients.loyalty.programm.conditions.description-2')}
+                    <ul className='space-y-2'>
+                      <li className='flex items-center'>
+                        <Check className='mr-2 h-5 w-5 text-green-500' />
+                        <span>
+                          {t('clients.loyalty.works.levels.card-1.bonus-1')}
+                        </span>
+                      </li>
+                      <li className='flex items-center'>
+                        <Check className='mr-2 h-5 w-5 text-green-500' />
+                        <span>
+                          {t('clients.loyalty.works.levels.card-1.bonus-2')}
+                        </span>
+                      </li>
+                      <li className='flex items-center'>
+                        <Check className='mr-2 h-5 w-5 text-green-500' />
+                        <span>
+                          {t('clients.loyalty.works.levels.card-1.bonus-3')}
+                        </span>
+                      </li>
+                    </ul>
+                  </CardContent>
+                </Card>
+
+                <Card className='overflow-hidden border-t-4 border-t-yellow-500 transition-all hover:shadow-lg'>
+                  <CardContent className='p-6'>
+                    <h3 className='mb-4 text-center text-2xl font-bold'>
+                      {t('clients.loyalty.works.levels.card-2.title')}
+                    </h3>
+                    <div className='mb-6 text-center'>
+                      <span className='text-4xl font-bold'>
+                        {t('clients.loyalty.works.levels.card-2.percent')}
+                      </span>
+                      <p className='text-sm text-gray-600'>
+                        {t('clients.loyalty.works.levels.card.mark')}
                      </p>
                    </div>
-                  </div>
-                  <div className='flex items-start'>
-                    <div className='mt-1 flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full bg-red-600'>
-                      <span className='text-xs text-white'>✓</span>
-                    </div>
-                    <div className='ml-3'>
-                      <h3 className='text-lg font-medium'>
-                        {t('clients.loyalty.programm.conditions-3')}
-                      </h3>
-                      <p className='text-gray-600'>
-                        {t('clients.loyalty.programm.conditions.description-3')}
+                    <ul className='space-y-2'>
+                      <li className='flex items-center'>
+                        <Check className='mr-2 h-5 w-5 text-green-500' />
+                        <span>
+                          {t('clients.loyalty.works.levels.card-1.bonus-1')}
+                        </span>
+                      </li>
+                      <li className='flex items-center'>
+                        <Check className='mr-2 h-5 w-5 text-green-500' />
+                        <span>
+                          {t('clients.loyalty.works.levels.card-2.bonus-2')}
+                        </span>
+                      </li>
+                      <li className='flex items-center'>
+                        <Check className='mr-2 h-5 w-5 text-green-500' />
+                        <span>
+                          {t('clients.loyalty.works.levels.card-3.bonus-3')}
+                        </span>
+                      </li>
+                      <li className='flex items-center'>
+                        <Check className='mr-2 h-5 w-5 text-green-500' />
+                        <span>
+                          {t('clients.loyalty.works.levels.card-4.bonus-4')}
+                        </span>
+                      </li>
+                    </ul>
+                  </CardContent>
+                </Card>
+
+                <Card className='overflow-hidden border-t-4 border-t-red-600 transition-all hover:shadow-lg'>
+                  <CardContent className='p-6'>
+                    <h3 className='mb-4 text-center text-2xl font-bold'>
+                      {t('clients.loyalty.works.levels.card-3.title')}
+                    </h3>
+                    <div className='mb-6 text-center'>
+                      <span className='text-4xl font-bold'>
+                        {t('clients.loyalty.works.levels.card-3.percent')}
+                      </span>
+                      <p className='text-sm text-gray-600'>
+                        {t('clients.loyalty.works.levels.card.mark')}
                      </p>
                    </div>
-                  </div>
-                </div>
-              </div>
-              <div className='relative h-[400px] overflow-hidden rounded-xl shadow-xl'>
-                <Image
-                  src='/placeholder.svg?height=400&width=600&text=Программа+лояльности'
-                  alt='Программа лояльности'
-                  fill
-                  className='object-cover'
-                />
+                    <ul className='space-y-2'>
+                      <li className='flex items-center'>
+                        <Check className='mr-2 h-5 w-5 text-green-500' />
+                        <span>
+                          {t('clients.loyalty.works.levels.card-3.bonus-1')}
+                        </span>
+                      </li>
+                      <li className='flex items-center'>
+                        <Check className='mr-2 h-5 w-5 text-green-500' />
+                        <span>
+                          {t('clients.loyalty.works.levels.card-3.bonus-2')}
+                        </span>
+                      </li>
+                      <li className='flex items-center'>
+                        <Check className='mr-2 h-5 w-5 text-green-500' />
+                        <span>
+                          {t('clients.loyalty.works.levels.card-3.bonus-3')}
+                        </span>
+                      </li>
+                      <li className='flex items-center'>
+                        <Check className='mr-2 h-5 w-5 text-green-500' />
+                        <span>
+                          {t('clients.loyalty.works.levels.card-3.bonus-4')}
+                        </span>
+                      </li>
+                      <li className='flex items-center'>
+                        <Check className='mr-2 h-5 w-5 text-green-500' />
+                        <span>
+                          {t('clients.loyalty.works.levels.card-3.bonus-5')}
+                        </span>
+                      </li>
+                    </ul>
+                  </CardContent>
+                </Card>
              </div>
            </div>
-          </div>
-        </section>
+          </section>
+        </Container>

-        {/* How It Works */}
-        <section className='bg-gray-50 py-16'>
-          <div className='container mx-auto'>
-            <div className='mb-12 text-center'>
-              <h2 className='mb-4 text-3xl font-bold tracking-tight sm:text-4xl'>
-                {t('clients.loyalty.works.title')}
-              </h2>
-              <p className='mx-auto max-w-2xl text-gray-600'>
-                {t('clients.loyalty.works.description')}
-              </p>
-            </div>
-
-            <div className='grid gap-8 md:grid-cols-4'>
-              <div className='text-center'>
-                <div className='mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-red-600 text-2xl font-bold text-white'>
-                  1
-                </div>
-                <h3 className='mb-2 text-xl font-bold'>
-                  {t('clients.loyalty.works.stage-1')}
-                </h3>
-                <p className='text-gray-600'>
-                  {t('clients.loyalty.works.stage.description-1')}
-                </p>
-              </div>
-              <div className='text-center'>
-                <div className='mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-red-600 text-2xl font-bold text-white'>
-                  2
-                </div>
-                <h3 className='mb-2 text-xl font-bold'>
-                  {t('clients.loyalty.works.stage-2')}
-                </h3>
-                <p className='text-gray-600'>
-                  {t('clients.loyalty.works.stage.description-2')}
-                </p>
-              </div>
-              <div className='text-center'>
-                <div className='mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-red-600 text-2xl font-bold text-white'>
-                  3
-                </div>
-                <h3 className='mb-2 text-xl font-bold'>
-                  {t('clients.loyalty.works.stage-3')}
-                </h3>
-                <p className='text-gray-600'>
-                  {t('clients.loyalty.works.stage.description-3')}
-                </p>
-              </div>
-              <div className='text-center'>
-                <div className='mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-red-600 text-2xl font-bold text-white'>
-                  4
-                </div>
-                <h3 className='mb-2 text-xl font-bold'>
-                  {t('clients.loyalty.works.stage-4')}
-                </h3>
-                <p className='text-gray-600'>
-                  {t('clients.loyalty.works.stage.description-4')}
-                </p>
-              </div>
-            </div>
-          </div>
-        </section>
-
-        {/* Loyalty Levels */}
-        <section className='py-16'>
-          <div className='container mx-auto'>
-            <div className='mb-12 text-center'>
-              <h2 className='mb-4 text-3xl font-bold tracking-tight sm:text-4xl'>
-                {t('clients.loyalty.works.levels.title')}
-              </h2>
-              <p className='mx-auto max-w-2xl text-gray-600'>
-                {t('clients.loyalty.works.levels.description')}
-              </p>
-            </div>
-
-            <div className='grid gap-8 md:grid-cols-3'>
-              <Card className='overflow-hidden border-t-4 border-t-gray-400 transition-all hover:shadow-lg'>
-                <CardContent className='p-6'>
-                  <h3 className='mb-4 text-center text-2xl font-bold'>
-                    {t('clients.loyalty.works.levels.card-1.title')}
-                  </h3>
-                  <div className='mb-6 text-center'>
-                    <span className='text-4xl font-bold'>
-                      {t('clients.loyalty.works.levels.card-1.percent')}
-                    </span>
-                    <p className='text-sm text-gray-600'>
-                      {t('clients.loyalty.works.levels.card.mark')}
-                    </p>
-                  </div>
-                  <ul className='space-y-2'>
-                    <li className='flex items-center'>
-                      <Check className='mr-2 h-5 w-5 text-green-500' />
-                      <span>
-                        {t('clients.loyalty.works.levels.card-1.bonus-1')}
-                      </span>
-                    </li>
-                    <li className='flex items-center'>
-                      <Check className='mr-2 h-5 w-5 text-green-500' />
-                      <span>
-                        {t('clients.loyalty.works.levels.card-1.bonus-2')}
-                      </span>
-                    </li>
-                    <li className='flex items-center'>
-                      <Check className='mr-2 h-5 w-5 text-green-500' />
-                      <span>
-                        {t('clients.loyalty.works.levels.card-1.bonus-3')}
-                      </span>
-                    </li>
-                  </ul>
-                </CardContent>
-              </Card>
-
-              <Card className='overflow-hidden border-t-4 border-t-yellow-500 transition-all hover:shadow-lg'>
-                <CardContent className='p-6'>
-                  <h3 className='mb-4 text-center text-2xl font-bold'>
-                    {t('clients.loyalty.works.levels.card-2.title')}
-                  </h3>
-                  <div className='mb-6 text-center'>
-                    <span className='text-4xl font-bold'>
-                      {t('clients.loyalty.works.levels.card-2.percent')}
-                    </span>
-                    <p className='text-sm text-gray-600'>
-                      {t('clients.loyalty.works.levels.card.mark')}
-                    </p>
-                  </div>
-                  <ul className='space-y-2'>
-                    <li className='flex items-center'>
-                      <Check className='mr-2 h-5 w-5 text-green-500' />
-                      <span>
-                        {t('clients.loyalty.works.levels.card-1.bonus-1')}
-                      </span>
-                    </li>
-                    <li className='flex items-center'>
-                      <Check className='mr-2 h-5 w-5 text-green-500' />
-                      <span>
-                        {t('clients.loyalty.works.levels.card-2.bonus-2')}
-                      </span>
-                    </li>
-                    <li className='flex items-center'>
-                      <Check className='mr-2 h-5 w-5 text-green-500' />
-                      <span>
-                        {t('clients.loyalty.works.levels.card-3.bonus-3')}
-                      </span>
-                    </li>
-                    <li className='flex items-center'>
-                      <Check className='mr-2 h-5 w-5 text-green-500' />
-                      <span>
-                        {t('clients.loyalty.works.levels.card-4.bonus-4')}
-                      </span>
-                    </li>
-                  </ul>
-                </CardContent>
-              </Card>
-
-              <Card className='overflow-hidden border-t-4 border-t-red-600 transition-all hover:shadow-lg'>
-                <CardContent className='p-6'>
-                  <h3 className='mb-4 text-center text-2xl font-bold'>
-                    {t('clients.loyalty.works.levels.card-3.title')}
-                  </h3>
-                  <div className='mb-6 text-center'>
-                    <span className='text-4xl font-bold'>
-                      {t('clients.loyalty.works.levels.card-3.percent')}
-                    </span>
-                    <p className='text-sm text-gray-600'>
-                      {t('clients.loyalty.works.levels.card.mark')}
-                    </p>
-                  </div>
-                  <ul className='space-y-2'>
-                    <li className='flex items-center'>
-                      <Check className='mr-2 h-5 w-5 text-green-500' />
-                      <span>
-                        {t('clients.loyalty.works.levels.card-3.bonus-1')}
-                      </span>
-                    </li>
-                    <li className='flex items-center'>
-                      <Check className='mr-2 h-5 w-5 text-green-500' />
-                      <span>
-                        {t('clients.loyalty.works.levels.card-3.bonus-2')}
-                      </span>
-                    </li>
-                    <li className='flex items-center'>
-                      <Check className='mr-2 h-5 w-5 text-green-500' />
-                      <span>
-                        {t('clients.loyalty.works.levels.card-3.bonus-3')}
-                      </span>
-                    </li>
-                    <li className='flex items-center'>
-                      <Check className='mr-2 h-5 w-5 text-green-500' />
-                      <span>
-                        {t('clients.loyalty.works.levels.card-3.bonus-4')}
-                      </span>
-                    </li>
-                    <li className='flex items-center'>
-                      <Check className='mr-2 h-5 w-5 text-green-500' />
-                      <span>
-                        {t('clients.loyalty.works.levels.card-3.bonus-5')}
-                      </span>
-                    </li>
-                  </ul>
-                </CardContent>
-              </Card>
-            </div>
-          </div>
-        </section>

        <CtaSection />
      </main>
--- a/src/pages-templates/login/index.tsx
+++ b/src/pages-templates/login/index.tsx
@ -1,11 +1,14 @@
-"use client"
+'use client';

+import { deleteCookie, getCookie } from 'cookies-next';
 import { Building2, Fuel, User } from 'lucide-react';
 import Link from 'next/link';
+import { useRouter, useSearchParams } from 'next/navigation';

 import { LoginForm } from '@/features/auth/login-form';
-import { useLanguage } from '@/shared/language';

+import { useTextController } from '@/shared/language/hooks/use-text-controller';
+import { Button } from '@/shared/shadcn-ui/button';
 import {
  Card,
  CardContent,
@ -19,77 +22,139 @@ import {
  TabsList,
  TabsTrigger,
 } from '@/shared/shadcn-ui/tabs';
+import Container from '@/shared/shadcn-ui/conteiner';
+
+const tabs = [
+  {
+    label: 'auth.bonusClient',
+    type: 'bonus' as const,
+    title: 'auth.bonusLogin.title',
+    description: 'auth.bonusLogin.description',
+    Icon: User,
+  },
+  {
+    label: 'auth.corporateClient',
+    type: 'corporate' as const,
+    title: 'auth.corporateLogin.title',
+    description: 'auth.corporateLogin.description',
+    Icon: Building2,
+  },
+];

 export default function LoginPage() {
-  const { t } = useLanguage();
+  const { t } = useTextController();
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const defaultTab = searchParams.get('tab') || 'bonus';
+
+  const handleTabChange = (tabType: string) => {
+    router.push(`?tab=${tabType}`, undefined, { shallow: true });
+  };

  return (
-    <div className='flex min-h-screen flex-col items-center justify-center'>
-      <main className='flex-1'>
-        <div className='container max-w-6xl py-16'>
-          <div className='mb-12 flex flex-col items-center text-center'>
-            <div className='mb-4 inline-flex items-center justify-center rounded-full bg-red-100 p-2'>
-              <Fuel className='h-6 w-6 text-red-600' />
+    <Container>
+      <div className='flex min-h-screen flex-col items-center justify-center'>
+        <main className='flex-1'>
+          <div className='container max-w-6xl py-16'>
+            <div className='mb-12 flex flex-col items-center text-center'>
+              <div className='mb-4 inline-flex items-center justify-center rounded-full bg-red-100 p-2'>
+                <Fuel className='h-6 w-6 text-red-600' />
+              </div>
+              <h1 className='mb-4 text-3xl font-bold tracking-tight sm:text-4xl'>
+                {t('auth.title')}
+              </h1>
+              <p className='max-w-2xl text-gray-600'>{t('auth.description')}</p>
            </div>
-            <h1 className='mb-4 text-3xl font-bold tracking-tight sm:text-4xl'>
-              {t('auth.title')}
-            </h1>
-            <p className='max-w-2xl text-gray-600'>
-              {t('auth.description')}
-            </p>
-          </div>

-          <div className='mx-auto max-w-md'>
-            <Tabs defaultValue='bonus' className='w-full'>
-              <TabsList className='mb-8 grid w-full grid-cols-2'>
-                <TabsTrigger value='bonus' className='text-base'>
-                  <User className='mr-2 h-4 w-4' /> {t('auth.bonusClient')}
-                </TabsTrigger>
-                <TabsTrigger value='corporate' className='text-base'>
-                  <Building2 className='mr-2 h-4 w-4' /> {t('auth.corporateClient')}
-                </TabsTrigger>
-              </TabsList>
+            <div className='mx-auto max-w-lg'>
+              <Tabs
+                defaultValue={defaultTab}
+                value={defaultTab}
+                onValueChange={handleTabChange}
+                className='w-full'
+              >
+                <TabsList className='mb-8 flex h-fit w-full flex-col sm:flex-row'>
+                  {tabs.map((tab) => {
+                    return (
+                      <TabsTrigger
+                        key={tab.label}
+                        value={tab.type}
+                        className='w-full text-base'
+                      >
+                        <tab.Icon className='mr-2 h-4 w-4' /> {t(tab.label)}
+                      </TabsTrigger>
+                    );
+                  })}
+                </TabsList>

-              <TabsContent value='bonus'>
-                <Card>
-                  <CardHeader>
-                    <CardTitle>{t('auth.bonusLogin.title')}</CardTitle>
-                    <CardDescription>
-                      {t('auth.bonusLogin.description')}
-                    </CardDescription>
-                  </CardHeader>
-                  <CardContent className='space-y-4'>
-                    <LoginForm />
-                  </CardContent>
-                </Card>
-              </TabsContent>
+                {tabs.map((tab) => {
+                  const tabCookieName = `${tab.type}__token`;

-              <TabsContent value='corporate'>
-                <Card>
-                  <CardHeader>
-                    <CardTitle>{t('auth.corporateLogin.title')}</CardTitle>
-                    <CardDescription>
-                      {t('auth.corporateLogin.description')}
-                    </CardDescription>
-                  </CardHeader>
-                  <CardContent className='space-y-4'>
-                    <LoginForm/>
-                  </CardContent>
-                </Card>
-              </TabsContent>
-            </Tabs>
+                  const authenticationCookie = getCookie(tabCookieName);

-            <div className='mt-8 text-center text-sm text-gray-500'>
-              <p>
-                {t('auth.loginIssues')}{' '}
-                <Link href='/contact' className='text-red-600 hover:underline'>
-                  {t('auth.contactLink')}
-                </Link>
-              </p>
+                  if (authenticationCookie) {
+                    return (
+                      <TabsContent key={tab.label} value={tab.type}>
+                        <Card>
+                          <CardHeader>
+                            <CardTitle>{t(tab.title)}</CardTitle>
+                          </CardHeader>
+                          <CardContent className='flex justify-center gap-2 space-y-4'>
+                            <Link
+                              href={
+                                tab.type === 'bonus'
+                                  ? '/customer-dashboard'
+                                  : '/corporate-dashboard'
+                              }
+                            >
+                              <Button className='flex items-center'>
+                                Открыть
+                              </Button>
+                            </Link>
+                            <Button
+                              variant='outline'
+                              className='flex items-center gap-2'
+                              onClick={() => {
+                                deleteCookie(tabCookieName);
+                                window.location.reload();
+                              }}
+                            >
+                              Выйти
+                            </Button>
+                          </CardContent>
+                        </Card>
+                      </TabsContent>
+                    );
+                  }
+
+                  return (
+                    <TabsContent key={tab.label} value={tab.type}>
+                      <Card>
+                        <CardHeader>
+                          <CardTitle>{t(tab.title)}</CardTitle>
+                          <CardDescription>{t(tab.description)}</CardDescription>
+                        </CardHeader>
+                        <CardContent className='space-y-4'>
+                          <LoginForm type={tab.type} />
+                        </CardContent>
+                      </Card>
+                    </TabsContent>
+                  );
+                })}
+              </Tabs>
+
+              <div className='mt-8 text-center text-sm text-gray-500'>
+                <p>
+                  {t('auth.loginIssues')}{' '}
+                  <Link href='/contact' className='text-red-600 hover:underline'>
+                    {t('auth.contactLink')}
+                  </Link>
+                </p>
+              </div>
            </div>
          </div>
-        </div>
-      </main>
-    </div>
+        </main>
+      </div>
+    </Container>
  );
-}
+}
--- a/src/shared/api/base-api.ts
+++ b/src/shared/api/base-api.ts
@ -1,4 +1,5 @@
 import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
+import { toast } from 'sonner';

 const baseQuery = fetchBaseQuery({
  baseUrl: process.env.NEXT_PUBLIC_API_URL,
@ -15,7 +16,25 @@ export const TAGS = {

 export const baseAPI = createApi({
  reducerPath: 'baseAPI',
-  baseQuery,
+  baseQuery: async (args, api, extraOptions) => {
+    const result = await baseQuery(args, api, extraOptions);
+
+    if (result.error) {
+      switch (result.error.status) {
+        case 401:
+          toast.error('Login credentials error');
+          break;
+
+        case 500:
+          toast.error('Server error, please try later');
+          break;
+
+        default:
+          break;
+      }
+    }
+    return result;
+  },
  tagTypes: Object.values(TAGS),
  endpoints: () => ({}),
 });
--- a/src/shared/components/about-counter.tsx
+++ b/src/shared/components/about-counter.tsx
@ -3,14 +3,15 @@
 import { Users } from 'lucide-react';
 import { useEffect, useRef, useState } from 'react';

+import { useTextController } from '@/shared/language/hooks/use-text-controller';
+
 import AnimatedCounter from './animated-counter';
-import { useLanguage } from '../language';

 export default function AboutCounter() {
  const [isVisible, setIsVisible] = useState(false);
  const sectionRef = useRef<HTMLDivElement>(null);

-  const {t} = useLanguage()
+  const { t } = useTextController();

  useEffect(() => {
    const observer = new IntersectionObserver(
@ -44,7 +45,7 @@ export default function AboutCounter() {
        <h3 className='text-2xl font-bold text-gray-900'>
          {isVisible ? <AnimatedCounter end={150} suffix='+' /> : '0+'}
        </h3>
-        <p className='text-gray-600'>{t("about.stats.items.2.label")}</p>
+        <p className='text-gray-600'>{t('about.stats.items.2.label')}</p>
      </div>
      <div className='transform rounded-lg bg-white p-3 shadow-md transition-transform hover:scale-105 sm:p-6'>
        <div className='mb-4 inline-flex items-center justify-center rounded-full bg-red-100 p-2'>
@ -53,7 +54,7 @@ export default function AboutCounter() {
        <h3 className='text-2xl font-bold text-gray-900'>
          {isVisible ? <AnimatedCounter end={5} suffix='M+' /> : '0M+'}
        </h3>
-        <p className='text-gray-600'>{t("about.stats.items.4.label")}</p>
+        <p className='text-gray-600'>{t('about.stats.items.4.label')}</p>
      </div>
      <div className='transform rounded-lg bg-white p-3 shadow-md transition-transform hover:scale-105 sm:p-6'>
        <div className='mb-4 inline-flex items-center justify-center rounded-full bg-red-100 p-2'>
@ -66,7 +67,7 @@ export default function AboutCounter() {
            '0%'
          )}
        </h3>
-        <p className='text-gray-600'>{t("about.stats.items.5.label")}</p>
+        <p className='text-gray-600'>{t('about.stats.items.5.label')}</p>
      </div>
    </div>
  );
--- a/src/shared/components/promotion-slider.tsx
+++ b/src/shared/components/promotion-slider.tsx
@ -1,13 +1,15 @@
 'use client';

-import { ChevronLeft, ChevronRight} from 'lucide-react';
+import { ChevronLeft, ChevronRight } from 'lucide-react';
 import Image from 'next/image';
+import Link from 'next/link';
 import { useEffect, useState } from 'react';

+import { Discounts } from '@/app/api-utlities/@types/main';
+
+import { useTextController } from '@/shared/language/hooks/use-text-controller';
 import { Button } from '@/shared/shadcn-ui/button';
 import { Card, CardContent } from '@/shared/shadcn-ui/card';
-import Link from 'next/link';
-import { useLanguage } from '../language';

 const promotions = [
  {
@ -41,11 +43,15 @@ const promotions = [
  },
 ];

-export default function PromotionSlider() {
+interface PromotionSliderProps {
+  discounts: Discounts;
+}
+
+export default function PromotionSlider({ discounts }: PromotionSliderProps) {
  const [currentIndex, setCurrentIndex] = useState(0);
  const [visibleItems, setVisibleItems] = useState(3);

-  const { t } = useLanguage()
+  const { t } = useTextController();

  useEffect(() => {
    const handleResize = () => {
@ -85,7 +91,7 @@ export default function PromotionSlider() {
          transform: `translateX(-${currentIndex * (100 / visibleItems)}%)`,
        }}
      >
-        {promotions.map((promo) => (
+        {discounts.map((promo) => (
          <div
            key={promo.id}
            className='w-full flex-none p-2 sm:w-1/2 lg:w-1/3'
@ -96,53 +102,59 @@ export default function PromotionSlider() {
              <div className='relative h-48'>
                <Image
                  src={promo.image || '/placeholder.svg'}
-                  alt={promo.title}
+                  alt={promo.name}
                  fill
                  className='object-cover'
                />
              </div>
              <CardContent className='p-4'>
-                <h3 className='mb-2 text-lg font-bold'>{promo.title}</h3>
+                <h3 className='mb-2 text-lg font-bold'>{promo.name}</h3>
                <p className='mb-3 text-sm text-gray-600'>
                  {promo.description}
                </p>
                <div className='flex items-center justify-between'>
                  <span className='text-xs text-gray-500'>
-                    Действует до: {promo.validUntil}
+                    {promo.expiresAt
+                      ? `Действует до: ${promo.expiresAt}`
+                      : null}
                  </span>
-                <Link href='#'>
-                  <Button
+                  <Link href='#'>
+                    <Button
                      variant='outline'
                      size='sm'
                      className='border-red-600 text-red-600 hover:bg-red-50'
                    >
                      {t('common.buttons.readMore')}
                    </Button>
-                </Link>
+                  </Link>
                </div>
              </CardContent>
            </Card>
          </div>
        ))}
      </div>
-      <Button
-        variant='outline'
-        size='icon'
-        className='absolute top-1/2 left-0 z-10 -translate-y-1/2 border-gray-200 bg-white shadow-lg'
-        onClick={prevSlide}
-      >
-        <ChevronLeft className='h-4 w-4' />
-        <span className='sr-only'>Предыдущий</span>
-      </Button>
-      <Button
-        variant='outline'
-        size='icon'
-        className='absolute top-1/2 right-0 z-10 -translate-y-1/2 border-gray-200 bg-white shadow-lg'
-        onClick={nextSlide}
-      >
-        <ChevronRight className='h-4 w-4' />
-        <span className='sr-only'>Следующий</span>
-      </Button>
+      {discounts.length > 3 && (
+        <>
+          <Button
+            variant='outline'
+            size='icon'
+            className='absolute top-1/2 left-0 z-10 -translate-y-1/2 border-gray-200 bg-white shadow-lg'
+            onClick={prevSlide}
+          >
+            <ChevronLeft className='h-4 w-4' />
+            <span className='sr-only'>Предыдущий</span>
+          </Button>
+          <Button
+            variant='outline'
+            size='icon'
+            className='absolute top-1/2 right-0 z-10 -translate-y-1/2 border-gray-200 bg-white shadow-lg'
+            onClick={nextSlide}
+          >
+            <ChevronRight className='h-4 w-4' />
+            <span className='sr-only'>Следующий</span>
+          </Button>
+        </>
+      )}
    </div>
  );
 }
--- a/src/shared/components/submit-button.tsx
+++ b/src/shared/components/submit-button.tsx
@ -0,0 +1,41 @@
+'use client';
+
+import { Loader2Icon } from 'lucide-react';
+
+import { useTextController } from '@/shared/language/hooks/use-text-controller';
+import { Button, type ButtonProps } from '@/shared/shadcn-ui/button';
+
+interface SubmitButtonProps extends ButtonProps {
+  title?: string;
+  isLoading: boolean;
+}
+
+export const SubmitButton = ({
+  title = 'common.buttons.login',
+  size = 'default',
+  type = 'submit',
+  className,
+  disabled,
+  isLoading,
+  onClick,
+  ...props
+}: SubmitButtonProps) => {
+  const { t } = useTextController();
+
+  return (
+    <Button
+      onClick={onClick}
+      type={type}
+      size={size}
+      className={className}
+      disabled={isLoading || disabled}
+      {...props}
+    >
+      {isLoading ? (
+        <Loader2Icon className='animate-spin' />
+      ) : (
+        (props.children ?? t(title))
+      )}
+    </Button>
+  );
+};
--- a/src/shared/language/api/text-control.api.ts
+++ b/src/shared/language/api/text-control.api.ts
@ -0,0 +1,12 @@
+import { baseAPI } from '@/shared/api/base-api';
+import { TextItem } from '@/shared/types/text.types';
+
+export const textControlApi = baseAPI.injectEndpoints({
+  endpoints: (builder) => ({
+    fetchText: builder.query<TextItem[], void>({
+      query: () => '/text',
+    }),
+  }),
+});
+
+export const { useFetchTextQuery } = textControlApi;
--- a/src/shared/language/context/language-provider.tsx
+++ b/src/shared/language/context/language-provider.tsx
@ -1,73 +0,0 @@
-'use client';
-
-import { createContext, type ReactNode, useEffect, useState } from 'react';
-
-import enTranslations from '../locales/en.json';
-import ruTranslations from '../locales/ru.json';
-
-// Define available languages
-export const languages = {
-  en: { name: 'English', flag: '🇬🇧' },
-  ru: { name: 'Русский', flag: '🇷🇺' },
-};
-
-export type Language = keyof typeof languages;
-
-// Define translations type with flat structure
-export type Translations = Record<string, string>;
-
-// Load translations
-const translations: Record<Language, Translations> = {
-  en: enTranslations,
-  ru: ruTranslations,
-};
-
-// Create context
-type LanguageContextType = {
-  language: Language;
-  setLanguage: (lang: Language) => void;
-  t: (key: string) => string;
-};
-
-export const LanguageContext = createContext<LanguageContextType | undefined>(
-  undefined,
-);
-
-// Create provider
-export function LanguageProvider({ children }: { children: ReactNode }) {
-  // Default to Russian, but check localStorage on client
-  const [language, setLanguageState] = useState<Language>('ru');
-
-  useEffect(() => {
-    // Check if we're in the browser
-    if (typeof window !== 'undefined') {
-      const savedLanguage = localStorage.getItem('language') as Language;
-      if (savedLanguage && languages[savedLanguage]) {
-        setLanguageState(savedLanguage);
-      }
-    }
-  }, []);
-
-  const setLanguage = (lang: Language) => {
-    setLanguageState(lang);
-    if (typeof window !== 'undefined') {
-      localStorage.setItem('language', lang);
-    }
-  };
-
-  // Translation function for flat structure
-  const t = (key: string): string => {
-    if (translations[language][key]) {
-      return translations[language][key];
-    }
-
-    console.warn(`Translation key not found: ${key}`);
-    return key;
-  };
-
-  return (
-    <LanguageContext.Provider value={{ language, setLanguage, t }}>
-      {children}
-    </LanguageContext.Provider>
-  );
-}
--- a/src/shared/language/context/text-control-provider.tsx
+++ b/src/shared/language/context/text-control-provider.tsx
@ -0,0 +1,49 @@
+import { createContext, type ReactNode } from 'react';
+
+import { TextItem } from '@/shared/types/text.types';
+
+export type Translations = Record<string, string>;
+
+// Create context
+type TextControlContextType = {
+  t: (key: string) => string;
+};
+
+export const TextControlContext = createContext<
+  TextControlContextType | undefined
+>(undefined);
+
+// Create provider
+
+export function TextControlProvider({
+  children,
+  textItems,
+}: {
+  children: ReactNode;
+  textItems?: TextItem[];
+}) {
+  const textMap = textItems?.reduce(
+    (pr, cr) => {
+      pr[cr.key] = cr.value;
+
+      return pr;
+    },
+    {} as Record<string, string | null>,
+  );
+
+  // Translation function for flat structure
+  const t = (key: string): string => {
+    if (textMap?.[key]) {
+      return textMap[key];
+    }
+
+    console.warn(`Translation key not found: ${key}`);
+    return key;
+  };
+
+  return (
+    <TextControlContext.Provider value={{ t }}>
+      {children}
+    </TextControlContext.Provider>
+  );
+}
--- a/src/shared/language/hooks/use-text-controller.ts
+++ b/src/shared/language/hooks/use-text-controller.ts
@ -2,10 +2,10 @@

 import { useContext } from 'react';

-import { LanguageContext } from '../context/language-provider';
+import { TextControlContext } from '../context/text-control-provider';

-export function useLanguage() {
-  const context = useContext(LanguageContext);
+export function useTextController() {
+  const context = useContext(TextControlContext);
  if (context === undefined) {
    throw new Error('useLanguage must be used within a LanguageProvider');
  }
--- a/src/shared/language/index.ts
+++ b/src/shared/language/index.ts
@ -1,6 +1,2 @@
-export {
-  LanguageProvider,
-  languages,
-  type Language,
-} from './context/language-provider';
-export { useLanguage } from './hooks/use-language';
+export { TextControlProvider } from './context/text-control-provider';
+export { useTextController } from './hooks/use-text-controller';
--- a/src/shared/language/locales/en.json
+++ b/src/shared/language/locales/en.json
@ -1,108 +0,0 @@
-{
-  "common.buttons.readMore": "Read More",
-  "common.buttons.findStation": "Find Station",
-  "common.buttons.learnMore": "Learn More",
-  "common.buttons.download": "Download",
-  "common.buttons.view": "View",
-  "common.buttons.contactUs": "Contact Us",
-  "common.buttons.apply": "Apply",
-  "common.buttons.login": "Login",
-  "common.buttons.logout": "Logout",
-  "common.buttons.submit": "Submit",
-  "common.buttons.filter": "Filter",
-  "common.buttons.resetFilters": "Reset Filters",
-  "common.buttons.downloadApp": "Download App",
-  "common.buttons.purchaseCardAtGasStations": "Purchase a card at gas stations",
-  "common.buttons.sendResume": "Send Resume",
-  "common.buttons.showAllStations": "Show All Stations",
-  "common.buttons.allPromotions": "All Promotions",
-
-  "common.navigation.home": "Home",
-  "common.navigation.about": "About Us",
-  "common.navigation.clients": "For Clients",
-  "common.navigation.stations": "Our Stations",
-  "common.navigation.vacancies": "Vacancies",
-  "common.navigation.promotions": "Promotions",
-  "common.navigation.charity": "Charity",
-  "common.navigation.certificates": "Certificates",
-  "common.navigation.contacts": "Contacts",
-
-  "common.footer.contacts": "Contacts",
-  "common.footer.navigation": "Navigation",
-  "common.footer.yourEmail": "Your email",
-  "common.footer.rights": "All rights reserved.",
-
-  "home.hero.title": "Modern Gas Station Network in Tajikistan",
-  "home.hero.description": "Quality fuel, convenient locations, and excellent service for our customers",
-
-  "home.about.title": "About Our Company",
-  "home.about.description1": "Our gas station network is one of the leading in Tajikistan. We provide high-quality fuel and a high level of service for our customers for more than 15 years.",
-  "home.about.description2": "We are constantly developing, opening new stations and improving service at existing ones. Our goal is to make refueling as convenient and fast as possible for every customer.",
-  "home.about.features.quality.title": "Quality Fuel",
-  "home.about.features.quality.description": "We guarantee the high quality of our fuel",
-  "home.about.features.equipment.title": "Modern Equipment",
-  "home.about.features.equipment.description": "All our stations are equipped with modern equipment",
-  "home.about.features.staff.title": "Professional Staff",
-  "home.about.features.staff.description": "Our employees are professionals in their field",
-
-  "home.stations.title": "Our Stations",
-  "home.stations.description": "Find the nearest station in our network. We are located in convenient places throughout Tajikistan.",
-
-  "home.promotions.title": "Current Promotions",
-  "home.promotions.description": "Special offers and promotions for our customers. Refuel profitably!",
-
-  "home.vacancies.title": "Vacancies",
-  "home.vacancies.description": "Join our team of professionals. We offer stable work and opportunities for growth.",
-  "home.vacancies.all": "All vacancies",
-  "home.vacancies.office": "Office",
-  "home.vacancies.stations": "Stations",
-  "home.vacancies.fullTime": "Full time",
-  "home.vacancies.experience": "Experience from 1 year",
-  "home.vacancies.shiftWork": "Shift work",
-  "home.vacancies.training": "Training",
-
-  "home.partners.title": "Our Partners",
-  "home.partners.description": "We cooperate with leading companies to provide the best services to our customers.",
-  "home.partners.becomePartner": "Become Our Partner",
-  "home.partners.becomePartnerText": "We are open to cooperation and new partnerships. Contact us to discuss opportunities.",
-
-  "home.charity.title": "Charity Foundation",
-  "home.charity.description": "Our charity foundation was created to support socially significant projects in Tajikistan. We strive to contribute to the development of society and help those in need.",
-  "home.charity.directions": "Main directions of our foundation's activities:",
-  "home.charity.education": "Support for educational programs",
-  "home.charity.children": "Help for children from low-income families",
-  "home.charity.ecology": "Environmental initiatives",
-  "home.charity.sports": "Support for sports events",
-  "home.charity.learnMore": "Learn More About the Foundation",
-
-  "home.cta.title": "Join Us",
-  "home.cta.description": "Become part of our network. Get special offers, bonuses, and discounts.",
-
-  "certificates.title": "Our Certificates",
-  "certificates.description": "GasNetwork adheres to high standards of quality and safety. Our certificates confirm the compliance of our products and services with international and national standards.",
-
-  "certificates.issueDate": "Issue Date",
-  "certificates.expiryDate": "Valid Until",
-  "certificates.faq": "Frequently Asked Questions",
-
-  "auth.title": "Login to your account",
-  "auth.description": "Log in to your personal account to access information about your bonuses, transaction history and other features.",
-  "auth.bonusClient": "Bonus Client",
-  "auth.corporateClient": "Corporate Client",
-  "auth.bonusLogin.title": "Login for bonus clients",
-  "auth.bonusLogin.description": "Enter your phone number and bonus card number to log in to your personal account.",
-  "auth.corporateLogin.title": "Login for corporate clients",
-  "auth.corporateLogin.description": "Enter your phone number and corporate card number to log in to your personal account.",
-  "auth.phoneNumber": "Phone number",
-  "auth.cardNumber": "Card number",
-  "auth.loginIssues": "Having trouble logging in?",
-
-  "map.filters": "Filters",
-  "map.stationsList": "Stations List",
-  "map.noStations": "No stations matching the selected filters",
-  "map.ourStations": "Our Stations",
-  "map.totalStations": "Total stations",
-  "map.services": "Services",
-  "map.cities": "Cities",
-  "map.allCities": "All Cities"
-}
--- a/src/shared/language/locales/ru.json
+++ b/src/shared/language/locales/ru.json
@ -1,247 +0,0 @@
-{
-  "common.contacts.address": "ул. Рудаки 137, Душанбе, Таджикистан",
-  "common.contacts.tel": "+992 (37) 223-45-67",
-  "common.contacts.email": "info@gasnetwork.tj",
-
-  "common.buttons.readMore": "Подробнее",
-  "common.buttons.findStation": "Найти заправку",
-  "common.buttons.learnMore": "Узнать больше",
-  "common.buttons.download": "Скачать",
-  "common.buttons.view": "Просмотр",
-  "common.buttons.contactUs": "Связаться с нами",
-  "common.buttons.apply": "Подать заявку",
-  "common.buttons.login": "Вход",
-  "common.buttons.logout": "Выйти",
-  "common.buttons.submit": "Отправить",
-  "common.buttons.filter": "Фильтры",
-  "common.buttons.resetFilters": "Сбросить фильтры",
-  "common.buttons.downloadApp": "Скачать приложение",
-  "common.buttons.purchaseCardAtGasStations": "Приобретайте карту в сети АЗС",
-  "common.buttons.sendResume": "Отправить резюме",
-  "common.buttons.showAllStations": "Показать все заправки",
-  "common.buttons.allPromotions": "Все акции",
-
-  "common.navigation.home": "Главная",
-  "common.navigation.about": "О нас",
-  "common.navigation.clients": "Клиентам",
-  "common.navigation.stations": "Наши заправки",
-  "common.navigation.vacancies": "Вакансии",
-  "common.navigation.promotions": "Акции",
-  "common.navigation.charity": "Благотворительность",
-  "common.navigation.certificates": "Сертификаты",
-  "common.navigation.contacts": "Контакты",
-
-  "common.footer.contacts": "Контакты",
-  "common.footer.navigation": "Навигация",
-  "common.footer.yourEmail": "Ваш email",
-  "common.footer.rights": "Все права защищены.",
-
-  "home.hero.title": "Сеть современных заправок в Таджикистане",
-  "home.hero.description": "Качественное топливо, удобное расположение и отличный сервис для наших клиентов",
-
-  "home.stats.stations": "Заправок по стране",
-  "home.stats.daily": "Клиентов ежедневно",
-  "home.stats.years": "Лет на рынке",
-  "home.stats.mode": "Работаем круглосуточно",
-
-  "home.about.title": "О нашей компании",
-  "home.about.description1": "Наша сеть заправок является одной из ведущих в Таджикистане. Мы предоставляем качественное топливо и высокий уровень обслуживания для наших клиентов уже более 15 лет.",
-  "home.about.description2": "Мы постоянно развиваемся, открывая новые станции и улучшая сервис на существующих. Наша цель - сделать заправку автомобиля максимально удобной и быстрой для каждого клиента.",
-  "home.about.features.quality.title": "Качественное топливо",
-  "home.about.features.quality.description": "Мы гарантируем высокое качество нашего топлива",
-  "home.about.features.equipment.title": "Современное оборудование",
-  "home.about.features.equipment.description": "Все наши станции оснащены современным оборудованием",
-  "home.about.features.staff.title": "Профессиональный персонал",
-  "home.about.features.staff.description": "Наши сотрудники - профессионалы своего дела",
-
-  "about.hero.imageAlt": "О нашей компании",
-  "about.hero.title": "О нашей компании",
-  "about.hero.subtitle": "Узнайте больше о нашей истории, ценностях и миссии. Мы стремимся предоставлять лучший сервис и качественное топливо для наших клиентов.",
-
-  "about.overview.title": "Лидер на рынке Таджикистана",
-  "about.overview.description1": "GasNetwork - ведущая сеть автозаправочных станций в Таджикистане, предоставляющая высококачественное топливо и превосходный сервис. Наша компания была основана в 2008 году и с тех пор стала символом надежности и качества в энергетическом секторе страны.",
-  "about.overview.description2": "Мы гордимся тем, что предлагаем нашим клиентам только лучшее топливо, соответствующее международным стандартам качества. Наши заправочные станции оснащены современным оборудованием, которое обеспечивает быстрое и безопасное обслуживание.",
-  "about.overview.description3": "Наша миссия - сделать поездки наших клиентов комфортными и безопасными, предоставляя качественное топливо и отличный сервис по всей стране.",
-  "about.overview.imageAlt": "Главный офис GasNetwork",
-
-  "about.overview.benefits.0.title": "Качество",
-  "about.overview.benefits.0.description": "Топливо высшего стандарта",
-  "about.overview.benefits.1.title": "Сервис",
-  "about.overview.benefits.1.description": "Профессиональное обслуживание",
-  "about.overview.benefits.2.title": "Инновации",
-  "about.overview.benefits.2.description": "Современные технологии",
-  "about.overview.benefits.3.title": "Доступность",
-  "about.overview.benefits.3.description": "Станции по всей стране",
-
-  "about.stats.title": "GasNetwork в цифрах",
-  "about.stats.subtitle": "Наши достижения и рост за годы работы на рынке Таджикистана",
-
-  "about.stats.items.0.value": "25",
-  "about.stats.items.0.suffix": "+",
-  "about.stats.items.0.label": "Заправок по стране",
-  "about.stats.items.1.value": "15",
-  "about.stats.items.1.label": "Лет на рынке",
-  "about.stats.items.2.value": "150",
-  "about.stats.items.2.suffix": "+",
-  "about.stats.items.2.label": "Сотрудников",
-  "about.stats.items.3.value": "1000000",
-  "about.stats.items.3.suffix": "+",
-  "about.stats.items.3.label": "Клиентов в год",
-  "about.stats.items.4.label": "Литров топлива в месяц",
-  "about.stats.items.5.label": "Довольных клиентов",
-
-  "about.history.title": "Наша история",
-  "about.history.subtitle": "История развития нашей компании от небольшой сети до лидера рынка",
-
-  "about.stations.title": "Наши заправочные станции",
-  "about.stations.subtitle": "Современные заправочные станции, оснащенные по последнему слову техники",
-  "about.stations.description": "Наши заправочные станции расположены в стратегически важных точках по всему Таджикистану, обеспечивая удобный доступ для всех наших клиентов.",
-  "about.stations.buttonText": "Найти ближайшую заправку",
-
-  "about.values.title": "Наши ценности",
-  "about.values.subtitle": "Принципы, которыми мы руководствуемся в нашей работе",
-  "about.values.items.0.title": "Качество",
-  "about.values.items.0.description": "Мы предлагаем только высококачественное топливо, соответствующее международным стандартам. Регулярные проверки и контроль качества гарантируют, что наши клиенты получают лучшее.",
-  "about.values.items.1.title": "Клиентоориентированность",
-  "about.values.items.1.description": "Наши клиенты - наш главный приоритет. Мы стремимся предоставить лучший сервис, удобные условия и приятную атмосферу на каждой нашей заправке.",
-  "about.values.items.2.title": "Профессионализм",
-  "about.values.items.2.description": "Наши сотрудники - профессионалы своего дела. Мы постоянно инвестируем в их обучение и развитие, чтобы обеспечить высокий уровень обслуживания.",
-
-  "about.team.title": "Наша команда",
-  "about.team.subtitle": "Познакомьтесь с профессионалами, которые делают GasNetwork лучшей сетью заправок в Таджикистане",
-  "about.team.members.0.name": "Алишер Рахмонов",
-  "about.team.members.0.position": "Генеральный директор",
-  "about.team.members.1.name": "Фарида Каримова",
-  "about.team.members.1.position": "Финансовый директор",
-  "about.team.members.2.name": "Рустам Назаров",
-  "about.team.members.2.position": "Технический директор",
-  "about.team.members.3.name": "Зарина Шарипова",
-  "about.team.members.3.position": "Директор по маркетингу",
-
-  "about.testimonials.title": "Отзывы клиентов",
-  "about.testimonials.subtitle": "Что говорят о нас наши клиенты",
-  "about.testimonials.items.0.name": "Фархад К.",
-  "about.testimonials.items.0.text": "Я всегда заправляюсь только на GasNetwork. Качество топлива на высоте, а обслуживание всегда приветливое и быстрое.",
-  "about.testimonials.items.0.rating": "5",
-  "about.testimonials.items.1.name": "Нигина М.",
-  "about.testimonials.items.1.text": "Очень удобно, что заправки расположены по всему городу. Всегда чисто, есть кафе и магазин. Рекомендую!",
-  "about.testimonials.items.1.rating": "5",
-  "about.testimonials.items.2.name": "Джамшед Р.",
-  "about.testimonials.items.2.text": "Пользуюсь картой лояльности GasNetwork уже 3 года. Накопил много бонусов и получил немало приятных подарков. Отличный сервис!",
-  "about.testimonials.items.2.rating": "4",
-
-  "home.stations.title": "Наши заправки",
-  "home.stations.description": "Найдите ближайшую к вам заправку нашей сети. Мы расположены в удобных местах по всему Таджикистану.",
-
-  "home.promotions.title": "Актуальные акции",
-  "home.promotions.description": "Специальные предложения и акции для наших клиентов. Заправляйтесь выгодно!",
-
-  "home.vacancies.title": "Вакансии",
-  "home.vacancies.description": "Присоединяйтесь к нашей команде профессионалов. Мы предлагаем стабильную работу и возможности для роста.",
-  "home.vacancies.all": "Все вакансии",
-  "home.vacancies.office": "Офис",
-  "home.vacancies.stations": "Заправки",
-  "home.vacancies.fullTime": "Полный день",
-  "home.vacancies.experience": "Опыт от 1 года",
-  "home.vacancies.shiftWork": "Сменный график",
-  "home.vacancies.training": "Обучение",
-
-  "home.partners.title": "Наши партнеры",
-  "home.partners.description": "Мы сотрудничаем с ведущими компаниями для предоставления лучших услуг нашим клиентам.",
-  "home.partners.becomePartner": "Станьте нашим партнером",
-  "home.partners.becomePartnerText": "Мы открыты для сотрудничества и новых партнерских отношений. Свяжитесь с нами для обсуждения возможностей.",
-
-  "home.charity.title": "Благотворительный фонд",
-  "home.charity.description": "Наш благотворительный фонд был создан для поддержки социально значимых проектов в Таджикистане. Мы стремимся внести свой вклад в развитие общества и помочь тем, кто в этом нуждается.",
-  "home.charity.directions": "Основные направления деятельности нашего фонда:",
-  "home.charity.education": "Поддержка образовательных программ",
-  "home.charity.children": "Помощь детям из малообеспеченных семей",
-  "home.charity.ecology": "Экологические инициативы",
-  "home.charity.sports": "Поддержка спортивных мероприятий",
-  "home.charity.learnMore": "Подробнее о фонде",
-
-  "home.cta.title": "Присоединяйтесь к нам",
-  "home.cta.description": "Станьте частью нашей сети. Получайте специальные предложения, бонусы и скидки.",
-
-  "clients.title": "Для наших клиентов",
-  "clients.description": "Информация для клиентов: программа лояльности, топливные карты, сертификаты и способы оплаты.",
-  "clients.services.title": "Наши услуги для клиентов",
-  "clients.services.subtitle": "Мы стремимся сделать обслуживание на наших заправках максимально удобным и выгодным для вас",
-  "clients.benefits.title": "Преимущества для клиентов",
-  "clients.benefits.subtitle": "Став клиентом GasNetwork, вы получаете множество преимуществ, которые делают заправку вашего автомобиля более выгодной и удобной.",
-  
-  "clients.loyalty.programm.about": "О программе лояльности",
-  "clients.loyalty.programm.about-description": "Программа лояльности GasNetwork — это возможность получать баллы за каждую покупку топлива и услуг на наших заправочных станциях. Накопленные баллы можно обменять на скидки, подарки или дополнительные услуги.",
-  "clients.loyalty.programm.about-description-2": "Участие в программе абсолютно бесплатное. Вам нужно только получить карту лояльности в любой нашей заправочной станции или зарегистрироваться в мобильном приложении.",
-  "clients.loyalty.programm.conditions-1": "1 литр = 1 балл",
-  "clients.loyalty.programm.conditions.description-1": "За каждый литр топлива вы получаете 1 балл",
-  "clients.loyalty.programm.conditions-2": "Дополнительные баллы",
-  "clients.loyalty.programm.conditions.description-2": "За покупки в магазине и кафе на заправке",
-  "clients.loyalty.programm.conditions-3": "Специальные акции",
-  "clients.loyalty.programm.conditions.description-3": "Удвоенные и утроенные баллы в праздничные дни",
-
-  "clients.loyalty.works.title": "Как это работает",
-  "clients.loyalty.works.description": "Простые шаги для участия в программе лояльности GasNetwork",
-
-  "clients.loyalty.works.stage-1": "Получите карту",
-  "clients.loyalty.works.stage.description-1": "Получите карту лояльности на любой заправке GasNetwork или зарегистрируйтесь в мобильном приложении",
-  "clients.loyalty.works.stage-2": "Заправляйтесь",
-  "clients.loyalty.works.stage.description-2": "Используйте карту при каждой заправке и покупке в магазинах на наших АЗС",
-  "clients.loyalty.works.stage-3": "Накапливайте баллы",
-  "clients.loyalty.works.stage.description-3": "Получайте баллы за каждую покупку и следите за их накоплением в приложении",
-  "clients.loyalty.works.stage-4": "Получайте выгоду",
-  "clients.loyalty.works.stage.description-4": "Обменивайте накопленные баллы на скидки, подарки или дополнительные услуги",
-
-  "clients.loyalty.works.levels.title": "Уровни лояльности",
-  "clients.loyalty.works.levels.description": "Чем больше вы заправляетесь, тем больше преимуществ получаете",
-  "clients.loyalty.works.levels.card.mark": "возврат баллами",
-
-  "clients.loyalty.works.levels.card-1.title": "Стандарт",
-  "clients.loyalty.works.levels.card-1.percent": "1%",
-  "clients.loyalty.works.levels.card-1.bonus-1": "1 балл за каждый литр топлива",
-  "clients.loyalty.works.levels.card-1.bonus-2": "Участие в акциях",
-  "clients.loyalty.works.levels.card-1.bonus-3": "Доступ к мобильному приложению",
-
-  "clients.loyalty.works.levels.card-2.title": "Золотой",
-  "clients.loyalty.works.levels.card-2.percent": "2%",
-  "clients.loyalty.works.levels.card-2.bonus-1": "2 балла за каждый литр топлива",
-  "clients.loyalty.works.levels.card-2.bonus-2": "Скидка 5% в кафе на заправках",
-  "clients.loyalty.works.levels.card-2.bonus-3": "Приоритетное обслуживание",
-  "clients.loyalty.works.levels.card-2.bonus-4": "Эксклюзивные акции",
-
-  "clients.loyalty.works.levels.card-3.title": "Платиновый",
-  "clients.loyalty.works.levels.card-3.percent": "3%",
-  "clients.loyalty.works.levels.card-3.bonus-1": "3 балла за каждый литр топлива",
-  "clients.loyalty.works.levels.card-3.bonus-2": "Скидка 10% в кафе на заправках",
-  "clients.loyalty.works.levels.card-3.bonus-3": "Бесплатная мойка раз в месяц",
-  "clients.loyalty.works.levels.card-3.bonus-4": "Персональный менеджер",
-  "clients.loyalty.works.levels.card-3.bonus-5": "VIP-обслуживание",
-
-  "certificates.title": "Наши сертификаты",
-  "certificates.description": "GasNetwork придерживается высоких стандартов качества и безопасности. Наши сертификаты подтверждают соответствие нашей продукции и услуг международным и национальным стандартам.",
-  "certificates.issueDate": "Дата выдачи",
-  "certificates.expiryDate": "Действителен до",
-  "certificates.faq": "Часто задаваемые вопросы",
-
-  "auth.title": "Вход в личный кабинет",
-  "auth.description": "Войдите в личный кабинет, чтобы получить доступ к информации о ваших бонусах, истории операций и другим возможностям.",
-  "auth.bonusClient": "Бонусный клиент",
-  "auth.corporateClient": "Корпоративный клиент",
-  "auth.bonusLogin.title": "Вход для бонусных клиентов",
-  "auth.bonusLogin.description": "Введите номер телефона и номер бонусной карты для входа в личный кабинет.",
-  "auth.corporateLogin.title": "Вход для корпоративных клиентов",
-  "auth.corporateLogin.description": "Введите номер телефона и номер корпоративной карты для входа в личный кабинет.",
-  "auth.phoneNumber": "Номер телефона",
-  "auth.cardNumber": "Номер карты",
-  "auth.loginIssues": "Возникли проблемы со входом?",
-  "auth.contactLink": "Свяжитесь с нами",
-
-  "map.filters": "Фильтры",
-  "map.stationsList": "Список заправок",
-  "map.noStations": "Нет заправок, соответствующих выбранным фильтрам",
-  "map.ourStations": "Наши заправки",
-  "map.totalStations": "Всего станций",
-  "map.services": "Услуги",
-  "map.cities": "Города",
-  "map.allCities": "Все города"
-}
--- a/src/shared/language/ui/language-switcher.tsx
+++ b/src/shared/language/ui/language-switcher.tsx
@ -1,44 +0,0 @@
-'use client';
-
-import { Check, Globe } from 'lucide-react';
-import { useState } from 'react';
-
-import { type Language, languages, useLanguage } from '@/shared/language';
-import { Button } from '@/shared/shadcn-ui/button';
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from '@/shared/shadcn-ui/dropdown-menu';
-
-export function LanguageSwitcher() {
-  const { language, setLanguage } = useLanguage();
-  const [open, setOpen] = useState(false);
-
-  return (
-    <DropdownMenu open={open} onOpenChange={setOpen}>
-      <DropdownMenuTrigger asChild>
-        <Button variant='ghost' size='sm' className='h-8 w-8 px-0'>
-          <Globe className='h-4 w-4' />
-          <span className='sr-only'>Switch language</span>
-        </Button>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent align='end'>
-        {Object.entries(languages).map(([code, { name, flag }]) => (
-          <DropdownMenuItem
-            key={code}
-            onClick={() => {
-              setLanguage(code as Language);
-              setOpen(false);
-            }}
-          >
-            <span className='mr-2'>{flag}</span>
-            {name}
-            {code === language && <Check className='ml-2 h-4 w-4' />}
-          </DropdownMenuItem>
-        ))}
-      </DropdownMenuContent>
-    </DropdownMenu>
-  );
-}
--- a/src/shared/providers/providers.tsx
+++ b/src/shared/providers/providers.tsx
@ -2,23 +2,25 @@

 import { Provider } from 'react-redux';

-import { LanguageProvider } from '../language';
+import { TextControlProvider } from '../language';
 import { store } from '../store';
 import { ThemeProvider } from '../theme/theme-provider';
+import { TextItem } from '../types/text.types';
 import { AosProvider } from './aos-provider';
 import { Toaster } from './toaster';

 type ProvidersProps = {
  children: React.ReactNode;
+  textItems: TextItem[];
 };

-export const Providers = ({ children }: ProvidersProps) => {
+export const Providers = ({ children, textItems }: ProvidersProps) => {
  return (
    <Provider store={store}>
-      <LanguageProvider>
+      <TextControlProvider textItems={textItems}>
        <ThemeProvider
          attribute='class'
-          defaultTheme='system'
+          defaultTheme='light'
          enableSystem
          disableTransitionOnChange
        >
@ -27,7 +29,7 @@ export const Providers = ({ children }: ProvidersProps) => {
            <Toaster />
          </AosProvider>
        </ThemeProvider>
-      </LanguageProvider>
+      </TextControlProvider>
    </Provider>
  );
 };
--- a/src/shared/shadcn-ui/conteiner.tsx
+++ b/src/shared/shadcn-ui/conteiner.tsx
@ -0,0 +1,10 @@
+"use client"
+
+interface ContainerProps {
+    children: React.ReactNode
+}
+export default function Container({children}: ContainerProps) {
+    return (
+        <div className="container mx-auto px-2.5 py-1">{children}</div>
+    )
+}
--- a/src/shared/store/index.ts
+++ b/src/shared/store/index.ts
@ -1,15 +1,20 @@
 import { configureStore } from '@reduxjs/toolkit';
 import { setupListeners } from '@reduxjs/toolkit/query/react';
+import { createWrapper } from 'next-redux-wrapper';
+
 import { baseAPI } from '@/shared/api/base-api';

 import { rootReducer } from './root-reducer';

-export const store = configureStore({
-  reducer: rootReducer,
-  middleware: (getDefaultMiddleware) =>
-    getDefaultMiddleware().concat(baseAPI.middleware),
-  devTools: process.env.NODE_ENV === 'development',
-});
+export const makeStore = () =>
+  configureStore({
+    reducer: rootReducer,
+    middleware: (getDefaultMiddleware) =>
+      getDefaultMiddleware().concat(baseAPI.middleware),
+    devTools: process.env.NODE_ENV === 'development',
+  });
+
+export const store = makeStore();

 setupListeners(store.dispatch);

@ -17,3 +22,5 @@ setupListeners(store.dispatch);
 export type RootState = ReturnType<typeof store.getState>;
 // Inferred type: {posts: PostsState, comments: CommentsState, users: UsersState}
 export type AppDispatch = typeof store.dispatch;
+
+export const wrapper = createWrapper(makeStore);
--- a/src/shared/store/root-reducer.ts
+++ b/src/shared/store/root-reducer.ts
@ -1,4 +1,5 @@
 import { combineReducers } from '@reduxjs/toolkit';
+
 import { baseAPI } from '@/shared/api/base-api';

 export const rootReducer = combineReducers({
--- a/src/shared/types/text.types.ts
+++ b/src/shared/types/text.types.ts
@ -0,0 +1,4 @@
+export interface TextItem {
+  key: string;
+  value: string | null;
+}
--- a/src/widgets/about-page/company-timeline.tsx
+++ b/src/widgets/about-page/company-timeline.tsx
@ -3,6 +3,7 @@
 import { Calendar, ChevronDown, ChevronUp } from 'lucide-react';
 import { useState } from 'react';

+import { useTextController } from '@/shared/language/hooks/use-text-controller';
 import { Button } from '@/shared/shadcn-ui/button';
 import { Card, CardContent } from '@/shared/shadcn-ui/card';

@ -61,6 +62,8 @@ export function CompanyTimeline() {
  const [expanded, setExpanded] = useState(false);
  const displayEvents = expanded ? timelineEvents : timelineEvents.slice(0, 4);

+  const { t } = useTextController();
+
  return (
    <div className='relative'>
      <div className='absolute left-1/2 -z-10 -ml-0.5 hidden h-full w-0.5 bg-gradient-to-b from-red-200 via-red-200 to-transparent md:block' />
@ -116,11 +119,13 @@ export function CompanyTimeline() {
          >
            {expanded ? (
              <>
-                Свернуть <ChevronUp className='ml-2 size-4' />
+                {t('about.companyTimeline.rollUp.button')}{' '}
+                <ChevronUp className='ml-2 size-4' />
              </>
            ) : (
              <>
-                Показать больше <ChevronDown className='ml-2 size-4' />
+                {t('about.companyTimeline.show.button')}{' '}
+                <ChevronDown className='ml-2 size-4' />
              </>
            )}
          </Button>
--- a/src/widgets/about-page/station-gallery.tsx
+++ b/src/widgets/about-page/station-gallery.tsx
@ -4,6 +4,7 @@ import { ChevronLeft, ChevronRight, Maximize } from 'lucide-react';
 import Image from 'next/image';
 import { useState } from 'react';

+import { useTextController } from '@/shared/language/hooks/use-text-controller';
 import { Button } from '@/shared/shadcn-ui/button';
 import {
  Dialog,
@ -72,8 +73,10 @@ export function StationGallery() {
    setCurrentImage((prev) => (prev === 0 ? stations.length - 1 : prev - 1));
  };

+  const { t } = useTextController();
+
  return (
-    <div className='space-y-8'>
+    <div className='space-y-8 px-2'>
      <div className='relative h-[400px] overflow-hidden rounded-xl shadow-xl md:h-[500px]'>
        <Image
          src={stations[currentImage].image || '/placeholder.svg'}
@ -93,7 +96,7 @@ export function StationGallery() {
          onClick={prevImage}
        >
          <ChevronLeft className='h-6 w-6' />
-          <span className='sr-only'>Предыдущая</span>
+          <span className='sr-only'>{t('about.gallery.previous')}</span>
        </Button>

        <Button
@ -103,7 +106,7 @@ export function StationGallery() {
          onClick={nextImage}
        >
          <ChevronRight className='h-6 w-6' />
-          <span className='sr-only'>Следующая</span>
+          <span className='sr-only'>{t('about.gallery.next')}</span>
        </Button>

        <Dialog>
--- a/src/widgets/about-section.tsx
+++ b/src/widgets/about-section.tsx
@ -4,10 +4,10 @@ import { Users } from 'lucide-react';
 import Image from 'next/image';

 import AboutCounter from '@/shared/components/about-counter';
-import { useLanguage } from '@/shared/language';
+import { useTextController } from '@/shared/language/hooks/use-text-controller';

 export const AboutSection = () => {
-  const { t } = useLanguage();
+  const { t } = useTextController();

  return (
    <section id='about' className='px-2 py-8 sm:py-16'>
@ -64,7 +64,7 @@ const features: Array<Feature> = [
 ];

 const Features = () => {
-  const { t } = useLanguage();
+  const { t } = useTextController();

  return (
    <div className='space-y-4'>
--- a/src/widgets/charity-section.tsx
+++ b/src/widgets/charity-section.tsx
@ -4,11 +4,11 @@ import { ChevronRight, Heart } from 'lucide-react';
 import Image from 'next/image';
 import Link from 'next/link';

-import { useLanguage } from '@/shared/language';
+import { useTextController } from '@/shared/language/hooks/use-text-controller';
 import { Button } from '@/shared/shadcn-ui/button';

 export const CharitySection = () => {
-  const { t } = useLanguage();
+  const { t } = useTextController();

  return (
    <section id='charity' className='px-2 py-8 sm:py-16'>
--- a/src/widgets/clients/ui/benefits-section.tsx
+++ b/src/widgets/clients/ui/benefits-section.tsx
@ -1,9 +1,11 @@
-"use client"
+'use client';

-import { useLanguage } from '@/shared/language';
 import { Percent } from 'lucide-react';
 import Image from 'next/image';

+import { useTextController } from '@/shared/language/hooks/use-text-controller';
+import Container from '@/shared/shadcn-ui/conteiner';
+
 interface Benefit {
  title: string;
  description: string;
@ -29,50 +31,51 @@ const benefits: Array<Benefit> = [
 ];

 export const BenefitsSection = () => {
-
-  const {t} = useLanguage()
+  const { t } = useTextController();

  return (
-    <section className='bg-gray-50 py-16'>
-      <div className='container mx-auto'>
-        <div className='grid items-center gap-12 md:grid-cols-2'>
-          <div className='order-2 md:order-1'>
-            <div className='mb-4 inline-flex items-center justify-center rounded-full bg-red-100 p-2'>
-              <Percent className='h-6 w-6 text-red-600' />
-            </div>
-            <h2 className='mb-6 text-3xl font-bold tracking-tight sm:text-4xl'>
-              {t('clients.benefits.title')}
-            </h2>
-            <p className='mb-6 text-gray-600'>
-              {t('clients.benefits.subtitle')}
-            </p>
+    <Container>
+      <section className='bg-gray-50 py-16'>
+        <div className='container mx-auto'>
+          <div className='grid items-center gap-12 md:grid-cols-2'>
+            <div className='order-2 md:order-1'>
+              <div className='mb-4 inline-flex items-center justify-center rounded-full bg-red-100 p-2'>
+                <Percent className='h-6 w-6 text-red-600' />
+              </div>
+              <h2 className='mb-6 text-3xl font-bold tracking-tight sm:text-4xl'>
+                {t('clients.benefits.title')}
+              </h2>
+              <p className='mb-6 text-gray-600'>
+                {t('clients.benefits.subtitle')}
+              </p>

-            <div className='space-y-4'>
-              {benefits.map(({ title, description }) => {
-                return (
-                  <div key={title} className='flex items-start'>
-                    <div className='mt-1 flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full bg-red-600'>
-                      <span className='text-xs text-white'>✓</span>
+              <div className='space-y-4'>
+                {benefits.map(({ title, description }) => {
+                  return (
+                    <div key={title} className='flex items-start'>
+                      <div className='mt-1 flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full bg-red-600'>
+                        <span className='text-xs text-white'>✓</span>
+                      </div>
+                      <div className='ml-3'>
+                        <h3 className='text-lg font-medium'>{title}</h3>
+                        <p className='text-gray-600'>{description}</p>
+                      </div>
                    </div>
-                    <div className='ml-3'>
-                      <h3 className='text-lg font-medium'>{title}</h3>
-                      <p className='text-gray-600'>{description}</p>
-                    </div>
-                  </div>
-                );
-              })}
+                  );
+                })}
+              </div>
+            </div>
+            <div className='relative order-1 h-[400px] overflow-hidden rounded-xl shadow-xl md:order-2'>
+              <Image
+                src='/placeholder.svg?height=400&width=600&text=Преимущества+для+клиентов'
+                alt='Преимущества для клиентов'
+                fill
+                className='object-cover'
+              />
            </div>
-          </div>
-          <div className='relative order-1 h-[400px] overflow-hidden rounded-xl shadow-xl md:order-2'>
-            <Image
-              src='/placeholder.svg?height=400&width=600&text=Преимущества+для+клиентов'
-              alt='Преимущества для клиентов'
-              fill
-              className='object-cover'
-            />
          </div>
        </div>
-      </div>
-    </section>
+      </section>
+    </Container>
  );
 };
--- a/src/widgets/clients/ui/services-overview-section.tsx
+++ b/src/widgets/clients/ui/services-overview-section.tsx
@ -1,8 +1,9 @@
-"use client"
+'use client';

 import { CreditCard, type LucideProps, Percent, Wallet } from 'lucide-react';
 import { type ForwardRefExoticComponent, type RefAttributes } from 'react';

+import { useTextController } from '@/shared/language/hooks/use-text-controller';
 import {
  Card,
  CardContent,
@ -10,7 +11,7 @@ import {
  CardHeader,
  CardTitle,
 } from '@/shared/shadcn-ui/card';
-import { useLanguage } from '@/shared/language';
+import Container from '@/shared/shadcn-ui/conteiner';

 interface ServiceOverview {
  title: string;
@ -46,43 +47,44 @@ const servicesOverview: Array<ServiceOverview> = [
 ];

 export const ServicesOverviewSection = () => {
-
-  const {t} = useLanguage()
+  const { t } = useTextController();

  return (
-    <section className='py-16'>
-      <div className='container mx-auto'>
-        <div className='mb-12 text-center'>
-          <h2 className='mb-4 text-3xl font-bold tracking-tight sm:text-4xl'>
-            {t('clients.services.title')}
-          </h2>
-          <p className='mx-auto max-w-2xl text-gray-600'>
-            {t('clients.services.subtitle')}
-          </p>
-        </div>
+    <Container>
+      <section className='py-16'>
+        <div className='container mx-auto'>
+          <div className='mb-12 text-center'>
+            <h2 className='mb-4 text-3xl font-bold tracking-tight sm:text-4xl'>
+              {t('clients.services.title')}
+            </h2>
+            <p className='mx-auto max-w-2xl text-gray-600'>
+              {t('clients.services.subtitle')}
+            </p>
+          </div>

-        <div className='grid gap-3 md:grid-cols-2 md:gap-6 lg:grid-cols-3'>
-          {servicesOverview.map(({ description, Icon, contentText, title }) => {
-            return (
-              <Card
-                key={title}
-                className='overflow-hidden transition-all hover:shadow-lg'
-              >
-                <CardHeader className='pb-3'>
-                  <div className='mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-red-100'>
-                    <Icon className='h-6 w-6 text-red-600' />
-                  </div>
-                  <CardTitle>{title}</CardTitle>
-                  <CardDescription>{description}</CardDescription>
-                </CardHeader>
-                <CardContent className='text-sm text-gray-600'>
-                  <p>{contentText}</p>
-                </CardContent>
-              </Card>
-            );
-          })}
+          <div className='grid gap-3 md:grid-cols-2 md:gap-6 lg:grid-cols-3'>
+            {servicesOverview.map(({ description, Icon, contentText, title }) => {
+              return (
+                <Card
+                  key={title}
+                  className='overflow-hidden transition-all hover:shadow-lg'
+                >
+                  <CardHeader className='pb-3'>
+                    <div className='mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-red-100'>
+                      <Icon className='h-6 w-6 text-red-600' />
+                    </div>
+                    <CardTitle>{title}</CardTitle>
+                    <CardDescription>{description}</CardDescription>
+                  </CardHeader>
+                  <CardContent className='text-sm text-gray-600'>
+                    <p>{contentText}</p>
+                  </CardContent>
+                </Card>
+              );
+            })}
+          </div>
        </div>
-      </div>
-    </section>
+      </section>
+    </Container>
  );
 };
--- a/src/widgets/cta-section.tsx
+++ b/src/widgets/cta-section.tsx
@ -2,11 +2,11 @@

 import Link from 'next/link';

-import { useLanguage } from '@/shared/language';
+import { useTextController } from '@/shared/language/hooks/use-text-controller';
 import { Button } from '@/shared/shadcn-ui/button';

 export const CtaSection = () => {
-  const { t } = useLanguage();
+  const { t } = useTextController();

  return (
    <section className='bg-red-600 px-2 py-8 text-white sm:py-16'>
--- a/src/widgets/footer.tsx
+++ b/src/widgets/footer.tsx
@ -3,126 +3,132 @@
 import { Fuel, Mail, MapPin, Phone } from 'lucide-react';
 import Link from 'next/link';

-import { useLanguage } from '@/shared/language';
+import { useTextController } from '@/shared/language/hooks/use-text-controller';

 export const Footer = () => {
-  const { t } = useLanguage();
+  const { t } = useTextController();

  return (
    <footer className='bg-gray-900 px-4 py-12 text-white'>
      <div className='containe mx-autor'>
-        <div className='grid grid-cols-1 gap-8 md:grid-cols-3'>
-          <div>
-            <div className='mb-4 flex items-center gap-2'>
-              <Fuel className='h-6 w-6 text-red-500' />
-              <span className='text-xl font-bold'>GasNetwork</span>
-            </div>
-            <p className='mb-4 text-gray-400'>{t('home.hero.description')}</p>
-            <div className='flex space-x-4'>
-              <a href='#' className='text-gray-400 hover:text-white'>
-                <svg
-                  className='h-6 w-6'
-                  fill='currentColor'
-                  viewBox='0 0 24 24'
-                  aria-hidden='true'
-                >
-                  <path
-                    fillRule='evenodd'
-                    d='M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z'
-                    clipRule='evenodd'
-                  />
-                </svg>
-              </a>
-              <a href='#' className='text-gray-400 hover:text-white'>
-                <svg
-                  className='h-6 w-6'
-                  fill='currentColor'
-                  viewBox='0 0 24 24'
-                  aria-hidden='true'
-                >
-                  <path
-                    fillRule='evenodd'
-                    d='M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z'
-                    clipRule='evenodd'
-                  />
-                </svg>
-              </a>
-              <a href='#' className='text-gray-400 hover:text-white'>
-                <svg
-                  className='h-6 w-6'
-                  fill='currentColor'
-                  viewBox='0 0 24 24'
-                  aria-hidden='true'
-                >
-                  <path d='M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84' />
-                </svg>
-              </a>
-            </div>
-          </div>
-          <div>
-            <h3 className='mb-4 text-lg font-semibold'>
-              {t('common.footer.contacts')}
-            </h3>
-            <div className='space-y-3'>
-              <div className='flex items-start'>
-                <MapPin className='mt-0.5 mr-3 h-5 w-5 text-red-500' />
-                <p>{t('common.contacts.address')}</p>
+        <div className='grid grid-cols-1 gap-8 md:gap-4 md:grid-cols-3'>
+          <div className='flex md:justify-center md:items-center'>
+            <div>
+              <div className='mb-4 flex items-center gap-2'>
+                <Fuel className='h-6 w-6 text-red-500' />
+                <span className='text-xl font-bold'>{t('common.name')}</span>
              </div>
-              <div className='flex items-start'>
-                <Phone className='mt-0.5 mr-3 h-5 w-5 text-red-500' />
-                <p>{t('common.contacts.tel')}</p>
-              </div>
-              <div className='flex items-start'>
-                <Mail className='mt-0.5 mr-3 h-5 w-5 text-red-500' />
-                <p>{t('common.contacts.email')}</p>
+              <p className='mb-4 text-gray-400'>{t('home.hero.description')}</p>
+              <div className='flex space-x-4'>
+                <a href='#' className='text-gray-400 hover:text-white'>
+                  <svg
+                    className='h-6 w-6'
+                    fill='currentColor'
+                    viewBox='0 0 24 24'
+                    aria-hidden='true'
+                  >
+                    <path
+                      fillRule='evenodd'
+                      d='M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z'
+                      clipRule='evenodd'
+                    />
+                  </svg>
+                </a>
+                <a href='#' className='text-gray-400 hover:text-white'>
+                  <svg
+                    className='h-6 w-6'
+                    fill='currentColor'
+                    viewBox='0 0 24 24'
+                    aria-hidden='true'
+                  >
+                    <path
+                      fillRule='evenodd'
+                      d='M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z'
+                      clipRule='evenodd'
+                    />
+                  </svg>
+                </a>
+                <a href='#' className='text-gray-400 hover:text-white'>
+                  <svg
+                    className='h-6 w-6'
+                    fill='currentColor'
+                    viewBox='0 0 24 24'
+                    aria-hidden='true'
+                  >
+                    <path d='M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84' />
+                  </svg>
+                </a>
              </div>
            </div>
          </div>
-          <div>
-            <h3 className='mb-4 text-lg font-semibold'>
-              {t('common.footer.navigation')}
-            </h3>
-            <ul className='space-y-2'>
-              <li>
-                <Link href='/' className='text-gray-400 hover:text-white'>
-                  {t('common.navigation.home')}
-                </Link>
-              </li>
-              <li>
-                <Link href='/about' className='text-gray-400 hover:text-white'>
-                  {t('common.navigation.about')}
-                </Link>
-              </li>
-              <li>
-                <Link
-                  href='/clients/loyalty'
-                  className='text-gray-400 hover:text-white'
-                >
-                  {t('common.navigation.clients')}
-                </Link>
-              </li>
-              <li>
-                <Link
-                  href='/#stations'
-                  className='text-gray-400 hover:text-white'
-                >
-                  {t('common.navigation.stations')}
-                </Link>
-              </li>
-              <li>
-                <Link
-                  href='/#vacancies'
-                  className='text-gray-400 hover:text-white'
-                >
-                  {t('common.navigation.vacancies')}
-                </Link>
-              </li>
-            </ul>
+          <div className='flex md:justify-center md:items-center'>
+            <div>
+              <h3 className='mb-4 text-lg font-semibold'>
+                {t('common.footer.contacts')}
+              </h3>
+              <div className='space-y-3'>
+                <div className='flex items-start'>
+                  <MapPin className='mt-0.5 mr-3 h-5 w-5 text-red-500' />
+                  <p>{t('common.contacts.address')}</p>
+                </div>
+                <div className='flex items-start'>
+                  <Phone className='mt-0.5 mr-3 h-5 w-5 text-red-500' />
+                  <p>{t('common.contacts.tel')}</p>
+                </div>
+                <div className='flex items-start'>
+                  <Mail className='mt-0.5 mr-3 h-5 w-5 text-red-500' />
+                  <p>{t('common.contacts.email')}</p>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div className='flex md:justify-center md:items-center'>
+            <div>
+              <h3 className='mb-4 text-lg font-semibold'>
+                {t('common.footer.navigation')}
+              </h3>
+              <ul className='space-y-2'>
+                <li>
+                  <Link href='/' className='text-gray-400 hover:text-white'>
+                    {t('common.navigation.home')}
+                  </Link>
+                </li>
+                <li>
+                  <Link href='/about' className='text-gray-400 hover:text-white'>
+                    {t('common.navigation.about')}
+                  </Link>
+                </li>
+                <li>
+                  <Link
+                    href='/clients/loyalty'
+                    className='text-gray-400 hover:text-white'
+                  >
+                    {t('common.navigation.clients')}
+                  </Link>
+                </li>
+                <li>
+                  <Link
+                    href='/#stations'
+                    className='text-gray-400 hover:text-white'
+                  >
+                    {t('common.navigation.stations')}
+                  </Link>
+                </li>
+                <li>
+                  <Link
+                    href='/#vacancies'
+                    className='text-gray-400 hover:text-white'
+                  >
+                    {t('common.navigation.vacancies')}
+                  </Link>
+                </li>
+              </ul>
+            </div>
          </div>
        </div>
        <div className='mt-8 border-t border-gray-800 pt-8 text-center text-gray-400'>
          <p>
-            &copy; {new Date().getFullYear()} GasNetwork.{' '}
+            &copy; {new Date().getFullYear()} {t('common.name')}.{' '}
            {t('common.footer.rights')}
          </p>
        </div>
--- a/src/widgets/header/ui/desktop-nav.tsx
+++ b/src/widgets/header/ui/desktop-nav.tsx
@ -1,6 +1,7 @@
 import Link from 'next/link';
 import React from 'react';

+import { useTextController } from '@/shared/language/hooks/use-text-controller';
 import { cn } from '@/shared/lib/utils';
 import {
  NavigationMenu,
@ -11,11 +12,9 @@ import {
  NavigationMenuTrigger,
  navigationMenuTriggerStyle,
 } from '@/shared/shadcn-ui/navigation-menu';
-import { useLanguage } from '@/shared/language';

 export function DesktopNav() {
-
-  const { t } = useLanguage();
+  const { t } = useTextController();

  return (
    <NavigationMenu className='hidden lg:flex'>
@ -41,7 +40,9 @@ export function DesktopNav() {
          </Link>
        </NavigationMenuItem>
        <NavigationMenuItem>
-          <NavigationMenuTrigger>{t('common.navigation.clients')}</NavigationMenuTrigger>
+          <NavigationMenuTrigger>
+            {t('common.navigation.clients')}
+          </NavigationMenuTrigger>
          <NavigationMenuContent>
            <ul className='grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2 lg:w-[600px]'>
              <li className='row-span-4'>
@ -60,10 +61,10 @@ export function DesktopNav() {
                </NavigationMenuLink>
              </li>
              <ListItem href='/clients/loyalty' title='Программа лояльности'>
-                Накапливайте баллы и получайте скидки на топливо и услуги
+                {t('clients.header.loyalty.description')}
              </ListItem>
              <ListItem href='/clients/certificates' title='Сертификаты'>
-                Подарочные сертификаты на топливо и услуги нашей сети
+                {t('clients.header.certificates.description')}
              </ListItem>
            </ul>
          </NavigationMenuContent>
--- a/src/widgets/header/ui/index.tsx
+++ b/src/widgets/header/ui/index.tsx
@ -4,7 +4,7 @@ import { UserCircle } from 'lucide-react';
 import Link from 'next/link';

 import { Logo } from '@/shared/assets/logo';
-import { useLanguage } from '@/shared/language';
+import { useTextController } from '@/shared/language/hooks/use-text-controller';
 // import { LanguageSwitcher } from '@/shared/language/ui/language-switcher';
 import { Button } from '@/shared/shadcn-ui/button';

@ -12,7 +12,7 @@ import { DesktopNav } from './desktop-nav';
 import { MobileNav } from './mobile-nav';

 export function Header() {
-  const { t } = useLanguage();
+  const { t } = useTextController();

  return (
    <header className='sticky top-0 z-40 w-full border-b bg-white'>
--- a/src/widgets/header/ui/mobile-nav.tsx
+++ b/src/widgets/header/ui/mobile-nav.tsx
@ -4,6 +4,7 @@ import { ChevronDown, ChevronRight, Menu } from 'lucide-react';
 import Link from 'next/link';
 import { useState } from 'react';

+import { useTextController } from '@/shared/language/hooks/use-text-controller';
 import { Button } from '@/shared/shadcn-ui/button';
 import {
  Collapsible,
@ -16,6 +17,8 @@ export function MobileNav() {
  const [open, setOpen] = useState(false);
  const [clientsOpen, setClientsOpen] = useState(false);

+  const { t } = useTextController();
+
  return (
    <Sheet open={open} onOpenChange={setOpen}>
      <SheetTrigger asChild>
@ -31,19 +34,19 @@ export function MobileNav() {
            onClick={() => setOpen(false)}
            className='text-lg font-medium transition-colors hover:text-red-600'
          >
-            Главная
+            {t('common.navigation.home')}
          </Link>
          <Link
            href='/about'
            onClick={() => setOpen(false)}
            className='text-lg font-medium transition-colors hover:text-red-600'
          >
-            О нас
+            {t('common.navigation.about')}
          </Link>

          <Collapsible open={clientsOpen} onOpenChange={setClientsOpen}>
            <CollapsibleTrigger className='data-[state=open]:animate-collapsible-down data-[state=closed]:animate-collapsible-up flex w-full items-center justify-between text-lg font-medium transition-all hover:text-red-600'>
-              <span>Клиентам</span>
+              <span>{t('common.navigation.clients')}</span>
              {clientsOpen ? (
                <ChevronDown className='h-5 w-5' />
              ) : (
@ -56,28 +59,14 @@ export function MobileNav() {
                onClick={() => setOpen(false)}
                className='block py-1 text-base transition-colors hover:text-red-600'
              >
-                Программа лояльности
-              </Link>
-              <Link
-                href='/clients/fuel-card'
-                onClick={() => setOpen(false)}
-                className='block py-1 text-base transition-colors hover:text-red-600'
-              >
-                Топливная карта
+                {t('common.navigation.loyatly')}
              </Link>
              <Link
                href='/clients/certificates'
                onClick={() => setOpen(false)}
                className='block py-1 text-base transition-colors hover:text-red-600'
              >
-                Сертификаты
-              </Link>
-              <Link
-                href='/clients/payment'
-                onClick={() => setOpen(false)}
-                className='block py-1 text-base transition-colors hover:text-red-600'
-              >
-                Способы оплаты
+                {t('common.navigation.certificates')}
              </Link>
            </CollapsibleContent>
          </Collapsible>
@ -87,35 +76,35 @@ export function MobileNav() {
            onClick={() => setOpen(false)}
            className='text-lg font-medium transition-colors hover:text-red-600'
          >
-            Наши заправки
+            {t('common.navigation.stations')}
          </Link>
          <Link
            href='/#vacancies'
            onClick={() => setOpen(false)}
            className='text-lg font-medium transition-colors hover:text-red-600'
          >
-            Вакансии
+            {t('common.navigation.vacancies')}
          </Link>
          <Link
            href='/#promotions'
            onClick={() => setOpen(false)}
            className='text-lg font-medium transition-colors hover:text-red-600'
          >
-            Акции
+            {t('common.navigation.promotions')}
          </Link>
          <Link
            href='/#partners'
            onClick={() => setOpen(false)}
            className='text-lg font-medium transition-colors hover:text-red-600'
          >
-            Партнеры
+            {t('common.navigation.partners')}
          </Link>
          <Link
            href='/#charity'
            onClick={() => setOpen(false)}
            className='text-lg font-medium transition-colors hover:text-red-600'
          >
-            Благотворительность
+            {t('common.navigation.charity')}
          </Link>
        </nav>
      </SheetContent>
--- a/src/widgets/hero-section.tsx
+++ b/src/widgets/hero-section.tsx
@ -4,11 +4,11 @@ import { MapPin } from 'lucide-react';
 import Image from 'next/image';
 import Link from 'next/link';

-import { useLanguage } from '@/shared/language';
+import { useTextController } from '@/shared/language/hooks/use-text-controller';
 import { Button } from '@/shared/shadcn-ui/button';

 export const HeroSection = () => {
-  const { t } = useLanguage();
+  const { t } = useTextController();

  return (
    <section className='relative'>
--- a/src/widgets/map-section.tsx
+++ b/src/widgets/map-section.tsx
@ -2,16 +2,30 @@

 import { MapPin } from 'lucide-react';

+import { Stations } from '@/app/api-utlities/@types/main';
+
 import { GasStationMap } from '@/features/map';
+import { Point } from '@/features/map/model';
+import { YandexMap } from '@/features/map/ui/yandex-map';

-import { useLanguage } from '@/shared/language';
+import { useTextController } from '@/shared/language/hooks/use-text-controller';

-export const MapSection = () => {
-  const { t } = useLanguage();
+interface MapSectionProps {
+  stations: Stations;
+}
+
+export const MapSection = ({ stations }: MapSectionProps) => {
+  const { t } = useTextController();
+
+  const points = stations.map((st) => ({
+    id: st.id,
+    coordinates: [st.latitude, st.longitude],
+  })) as Point[];

  return (
    <section id='stations' className='bg-gray-50 px-2 py-8 sm:py-16'>
      <div className='container mx-auto'>
+        <YandexMap points={points} />
        <div className='mb-12 flex flex-col items-center justify-center text-center'>
          <div className='mb-4 inline-flex items-center justify-center rounded-full bg-red-100 p-2'>
            <MapPin className='h-6 w-6 text-red-600' />
@ -27,7 +41,7 @@ export const MapSection = () => {
          className='h-[500px] overflow-hidden rounded-xl border shadow-lg'
          data-aos='fade-up'
        >
-          <GasStationMap />
+          {/* <GasStationMap stations={stations} /> */}
        </div>
      </div>
    </section>
--- a/src/widgets/partners-section.tsx
+++ b/src/widgets/partners-section.tsx
@ -4,11 +4,17 @@ import { Handshake } from 'lucide-react';
 import Image from 'next/image';
 import Link from 'next/link';

-import { useLanguage } from '@/shared/language';
+import { Partners } from '@/app/api-utlities/@types/main';
+
+import { useTextController } from '@/shared/language/hooks/use-text-controller';
 import { Button } from '@/shared/shadcn-ui/button';

-export const PartnersSection = () => {
-  const { t } = useLanguage();
+interface PartnersSectionProps {
+  partners: Partners;
+}
+
+export const PartnersSection = ({ partners }: PartnersSectionProps) => {
+  const { t } = useTextController();

  return (
    <section id='partners' className='bg-gray-50 px-2 py-8 sm:py-16'>
@ -26,20 +32,23 @@ export const PartnersSection = () => {
        </div>

        <div className='grid grid-cols-2 gap-4 sm:gap-8 md:grid-cols-4'>
-          {[1, 2, 3, 4, 5, 6, 7, 8].map((partner) => (
+          {partners.map(({ id, name, poster }) => (
            <div
-              key={partner}
+              key={id}
              className='flex h-32 flex-col items-center justify-center gap-0.5 rounded-lg bg-white p-6 shadow-md transition-transform hover:scale-105'
              data-aos='flip-left'
            >
              <Image
-                src={`/placeholder.svg?height=80&width=160&text=Partner ${partner}`}
-                alt={`Partner ${partner}`}
+                src={
+                  poster ??
+                  `/placeholder.svg?height=80&width=160&text=Partner ${id}`
+                }
+                alt={`Partner ${id}`}
                width={160}
                height={80}
                className='max-h-16 w-auto'
              />
-              <h4 className='font-extralight'>Название</h4>
+              <h4 className='font-extralight'>{name}</h4>
            </div>
          ))}
        </div>
--- a/src/widgets/promotions-section.tsx
+++ b/src/widgets/promotions-section.tsx
@ -2,14 +2,20 @@

 import { Gift } from 'lucide-react';

-import PromotionSlider from '@/shared/components/promotion-slider';
-import { useLanguage } from '@/shared/language';
+import { Discounts } from '@/app/api-utlities/@types/main';

-export const PromotionsSection = () => {
-  const { t } = useLanguage();
+import PromotionSlider from '@/shared/components/promotion-slider';
+import { useTextController } from '@/shared/language/hooks/use-text-controller';
+
+interface PromotionsSectionProps {
+  discounts: Discounts;
+}
+
+export const PromotionsSection = ({ discounts }: PromotionsSectionProps) => {
+  const { t } = useTextController();

  return (
-    <section id='promotions' className='bg-gray-50 py-8 px-2 sm:py-16'>
+    <section id='promotions' className='bg-gray-50 px-2 py-8 sm:py-16'>
      <div className='container mx-auto'>
        <div className='mb-12 flex flex-col items-center justify-center text-center'>
          <div className='mb-4 inline-flex items-center justify-center rounded-full bg-red-100 p-2'>
@ -22,7 +28,7 @@ export const PromotionsSection = () => {
            {t('home.promotions.description')}
          </p>
        </div>
-        <PromotionSlider />
+        <PromotionSlider discounts={discounts} />
      </div>
    </section>
  );
--- a/src/widgets/stats-section.tsx
+++ b/src/widgets/stats-section.tsx
@ -2,14 +2,15 @@

 import { useEffect, useRef, useState } from 'react';

+import { useTextController } from '@/shared/language/hooks/use-text-controller';
+
 import AnimatedCounter from '../shared/components/animated-counter';
-import { useLanguage } from '@/shared/language';

 export function StatsSection() {
  const [isVisible, setIsVisible] = useState(false);
  const sectionRef = useRef<HTMLDivElement>(null);

-  const { t } = useLanguage()
+  const { t } = useTextController();

  useEffect(() => {
    const observer = new IntersectionObserver(
@ -35,9 +36,12 @@ export function StatsSection() {
  }, []);

  return (
-    <section ref={sectionRef} className='bg-red-600 py-6 sm:py-12 px-2 text-white'>
+    <section
+      ref={sectionRef}
+      className='bg-red-600 px-2 py-6 text-white sm:py-12'
+    >
      <div className='container mx-auto'>
-        <div className='grid grid-cols-2 gap-4 sm:gap-8 text-center md:grid-cols-4'>
+        <div className='grid grid-cols-2 gap-4 text-center sm:gap-8 md:grid-cols-4'>
          <div className='space-y-2'>
            <h3 className='text-3xl font-bold'>
              {isVisible ? <AnimatedCounter end={25} suffix='+' /> : '0+'}
--- a/src/widgets/transactions-table.tsx
+++ b/src/widgets/transactions-table.tsx
@ -5,6 +5,7 @@ import { ru } from 'date-fns/locale';
 import { CalendarIcon } from 'lucide-react';
 import { useState } from 'react';

+import { useTextController } from '@/shared/language/hooks/use-text-controller';
 import { Button } from '@/shared/shadcn-ui/button';
 import { Calendar } from '@/shared/shadcn-ui/calendar';
 import { Label } from '@/shared/shadcn-ui/label';
@ -99,15 +100,21 @@ export const TransactionsTable = () => {
    setFilteredTransactions(filtered);
  };

+  const { t } = useTextController();
+
  return (
    <div className='space-y-6'>
      <div className='flex flex-col items-start justify-between gap-4 md:flex-row md:items-center'>
-        <h2 className='text-2xl font-bold'>История операций</h2>
+        <h2 className='text-2xl font-bold'>
+          {t('corporate.transactions.title')}
+        </h2>

        <div className='flex w-full flex-col gap-4 md:w-auto md:flex-row'>
          <div className='grid grid-cols-2 gap-2'>
            <div className='flex items-center gap-2'>
-              <Label htmlFor='start-date'>От</Label>
+              <Label htmlFor='start-date'>
+                {t('corporate.transactions.dateFrom')}
+              </Label>
              <Popover>
                <PopoverTrigger asChild>
                  <Button
@ -132,7 +139,9 @@ export const TransactionsTable = () => {
            </div>

            <div className='flex items-center gap-2'>
-              <Label htmlFor='end-date'>До</Label>
+              <Label htmlFor='end-date'>
+                {t('corporate.transactions.dateTo')}
+              </Label>
              <Popover>
                <PopoverTrigger asChild>
                  <Button
@ -142,7 +151,7 @@ export const TransactionsTable = () => {
                    <CalendarIcon className='mr-2 h-4 w-4' />
                    {endDate
                      ? format(endDate, 'PP', { locale: ru })
-                      : 'Выберите дату'}
+                      : t('corporate.transactions.selectDate')}
                  </Button>
                </PopoverTrigger>
                <PopoverContent className='w-auto p-0'>
@ -161,7 +170,7 @@ export const TransactionsTable = () => {
            className='mt-auto bg-red-600 hover:bg-red-700'
            onClick={filterTransactions}
          >
-            Применить
+            {t('corporate.transactions.applyButton')}
          </Button>
        </div>
      </div>
@ -170,12 +179,24 @@ export const TransactionsTable = () => {
        <Table>
          <TableHeader>
            <TableRow>
-              <TableHead>Дата</TableHead>
-              <TableHead>Станция</TableHead>
-              <TableHead>Продукт</TableHead>
-              <TableHead className='text-right'>Кол-во (л)</TableHead>
-              <TableHead className='text-right'>Стоимость</TableHead>
-              <TableHead className='text-right'>Сумма</TableHead>
+              <TableHead>
+                {t('corporate.transactions.tableHeaders.date')}
+              </TableHead>
+              <TableHead>
+                {t('corporate.transactions.tableHeaders.station')}
+              </TableHead>
+              <TableHead>
+                {t('corporate.transactions.tableHeaders.product')}
+              </TableHead>
+              <TableHead className='text-right'>
+                {t('corporate.transactions.tableHeaders.quantity')}
+              </TableHead>
+              <TableHead className='text-right'>
+                {t('corporate.transactions.tableHeaders.price')}
+              </TableHead>
+              <TableHead className='text-right'>
+                {t('corporate.transactions.tableHeaders.total')}
+              </TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
@ -191,10 +212,10 @@ export const TransactionsTable = () => {
                    {transaction.quantity}
                  </TableCell>
                  <TableCell className='text-right'>
-                    {transaction.cost.toFixed(2)} сомони
+                    {transaction.cost.toFixed(2)} {t('corporate.currency')}
                  </TableCell>
                  <TableCell className='text-right font-medium'>
-                    {transaction.total.toFixed(2)} сомони
+                    {transaction.total.toFixed(2)} {t('corporate.currency')}
                  </TableCell>
                </TableRow>
              ))
@ -204,7 +225,7 @@ export const TransactionsTable = () => {
                  colSpan={6}
                  className='py-6 text-center text-gray-500'
                >
-                  Нет операций за выбранный период
+                  {t('corporate.transactions.noTransactions')}
                </TableCell>
              </TableRow>
            )}
--- a/src/widgets/vacancies-section.tsx
+++ b/src/widgets/vacancies-section.tsx
@ -2,7 +2,9 @@

 import { Briefcase } from 'lucide-react';

-import { useLanguage } from '@/shared/language';
+import { Jobs } from '@/app/api-utlities/@types/main';
+
+import { useTextController } from '@/shared/language/hooks/use-text-controller';
 import { cn } from '@/shared/lib/utils';
 import { Badge } from '@/shared/shadcn-ui/badge';
 import { Button } from '@/shared/shadcn-ui/button';
@ -14,8 +16,25 @@ import {
  TabsTrigger,
 } from '@/shared/shadcn-ui/tabs';

-export const VacanciesSection = () => {
-  const { t } = useLanguage();
+interface VacanciesSectionProps {
+  jobs: Jobs;
+}
+
+export const VacanciesSection = ({ jobs }: VacanciesSectionProps) => {
+  const { t } = useTextController();
+
+  const jobsByType = new Map();
+
+  jobs.forEach((job) => {
+    const existing = jobsByType.get(job.type) || [];
+    jobsByType.set(job.type, [...existing, job]);
+  });
+
+  const allVacancies = t('home.vacancies.all');
+  const officeVacancies = t('home.vacancies.office');
+  const stationsVacancies = t('home.vacancies.stations');
+
+  const jobsTabsTitle = [allVacancies, ...Array.from(jobsByType.keys())];

  return (
    <section id='vacancies' className='px-2 py-8 sm:py-16'>
@ -32,53 +51,42 @@ export const VacanciesSection = () => {
          </p>
        </div>

-        <Tabs defaultValue='all' className='mx-auto w-full max-w-3xl'>
+        <Tabs defaultValue={allVacancies} className='mx-auto w-full max-w-3xl'>
          <TabsList className='mb-8 grid grid-cols-3'>
-            <TabsTrigger value='all'>{t('home.vacancies.all')}</TabsTrigger>
-            <TabsTrigger value='office'>{t('home.vacancies.office')}</TabsTrigger>
-            <TabsTrigger value='stations'>{t('home.vacancies.stations')}</TabsTrigger>
+            <TabsTrigger value={allVacancies}>
+              {t('home.vacancies.all')}
+            </TabsTrigger>
+            <TabsTrigger value={officeVacancies}>
+              {t('home.vacancies.office')}
+            </TabsTrigger>
+            <TabsTrigger value={stationsVacancies}>
+              {t('home.vacancies.stations')}
+            </TabsTrigger>
          </TabsList>
-          <TabsContent value='all' className='space-y-4'>
-            {[
-              'Оператор АЗС',
-              'Менеджер по продажам',
-              'Бухгалтер',
-              'Специалист по логистике',
-            ].map((job, index) => (
+
+          <TabsContent value={allVacancies} className='space-y-4'>
+            {jobs.map((job, index) => (
              <Vacancy
                key={index}
-                jobTitle={job}
-                location='Душанбе, Таджикистан'
-                tags={['Полный день', 'Опыт от 1 года']}
+                jobTitle={job.name}
+                location={job.location ?? ''}
+                tags={job.tags}
              />
            ))}
          </TabsContent>
-          <TabsContent value='office' className='space-y-4'>
-            {[
-              'Менеджер по продажам',
-              'Бухгалтер',
-              'Специалист по логистике',
-            ].map((job, index) => (
-              <Vacancy
-                key={index}
-                jobTitle={job}
-                location='Душанбе, Таджикистан'
-                tags={['Полный день', 'Опыт от 1 года']}
-              />
-            ))}
-          </TabsContent>
-          <TabsContent value='stations' className='space-y-4'>
-            {['Оператор АЗС', 'Заправщик', 'Менеджер станции'].map(
-              (job, index) => (
+
+          {Array.from(jobsByType.entries()).map(([type, jobs]) => (
+            <TabsContent key={type} value={type} className='space-y-4'>
+              {jobs.map((job: Jobs[number], index: number) => (
                <Vacancy
                  key={index}
-                  jobTitle={job}
-                  location='Душанбе, Таджикистан'
-                  tags={['Сменный график', 'Обучение']}
+                  jobTitle={job.name}
+                  location={job.location ?? ''}
+                  tags={job.tags}
                />
-              ),
-            )}
-          </TabsContent>
+              ))}
+            </TabsContent>
+          ))}
        </Tabs>
      </div>
    </section>
@ -92,7 +100,7 @@ interface VacancyProps {
 }

 const Vacancy = ({ jobTitle, location, tags }: VacancyProps) => {
-  const { t } = useLanguage();
+  const { t } = useTextController();

  return (
    <Card
--- a/tsconfig.json
+++ b/tsconfig.json
@ -13,6 +13,7 @@
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
+    "types": ["node"],
    "plugins": [
      {
        "name": "next"
@ -28,5 +29,5 @@
    }
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
-  "exclude": ["node_modules"]
+  "exclude": ["node_modules"],
 }
Author	SHA1	Message	Date
khadiatullo	cad373568e	update: added adaptability for pages	2025-05-01 05:14:46 +03:00
khadiatullo	cc5db77494	Merge branch 'render-main-page-data' into add-pages	2025-05-01 01:21:04 +03:00
Umar Adilov	3142023c79	Loading bonus clients from API	2025-05-01 01:45:12 +05:00
Umar Adilov	efae331aaf	Added authentication support	2025-05-01 01:16:11 +05:00
Umar Adilov	33c9368472	Refactoring auth	2025-04-30 20:28:35 +05:00
BunyodL	f28204416d	fix: revert changes	2025-04-30 20:28:25 +05:00
BunyodL	6dc26611c3	fix: fix text display	2025-04-30 18:13:25 +05:00
BunyodL	ec2cd2cf56	Merge branch 'dev' into render-main-page-data	2025-04-30 18:09:12 +05:00
BunyodL	2810c6b9fb	update: render main-page data	2025-04-30 17:34:33 +05:00
Umar Adilov	83451cf358	integrated text control provider	2025-04-30 17:00:52 +05:00
Umar Adilov	e0592eb581	added text endpoint	2025-04-30 02:13:54 +05:00
khadiatullo	0f5be58093	update: update ru.json	2025-04-29 20:40:00 +03:00
BunyodL	240aaa81ae	update: get main-page-data	2025-04-29 01:22:24 +05:00
khadiatullo	bd08e69065	update: update ru.json	2025-04-28 22:58:39 +03:00
Umar Adilov	82018cea2c	removed dark mode	2025-04-29 00:21:40 +05:00
Umar Adilov	5bc7d1d901	Merge branch 'dev' of https://devgit.oriyo.tj/adilovcode/oriyo_next into dev	2025-04-29 00:14:19 +05:00
Umar Adilov	dba36ae458	Introduced API integration with taylor db	2025-04-29 00:14:02 +05:00
BunyodL	4f5e56f855	fix: fix login-page errors	2025-04-28 22:17:37 +05:00
BunyodL	b5b20b054d	Merge branch 'feat-auth' into dev	2025-04-28 22:00:26 +05:00
adilovcode	fe52df1b7a	Merge pull request 'update: rendered all the text in json' (#7 ) from add-pages into dev Reviewed-on: #7	2025-04-28 21:49:32 +05:00
BunyodL	a78467947d	Merge branch 'dev' into feat-auth	2025-04-28 21:48:22 +05:00
BunyodL	935b7f72e5	feat: make auth logic	2025-04-28 21:48:14 +05:00
				`@ -0,0 +1 @@`
				`export { useLazyLoginQuery } from './api/login.api';`