From 33c93684725463f5b13fdc95c1bef1abe286b51d Mon Sep 17 00:00:00 2001
From: Umar Adilov <99314948+adilovcode@users.noreply.github.com>
Date: Wed, 30 Apr 2025 20:28:35 +0500
Subject: [PATCH 01/12] Refactoring auth

---
 package.json                                  |  1 +
 pnpm-lock.yaml                                | 74 +++++++++++++++++++
 .../api-utlities/utilities/oriyo.client.ts    | 10 +++
 src/app/api/auth/login/route.ts               | 49 +++++-------
 4 files changed, 102 insertions(+), 32 deletions(-)
 create mode 100644 src/app/api-utlities/utilities/oriyo.client.ts

diff --git a/package.json b/package.json
index a04c324..04d3507 100644
--- a/package.json
+++ b/package.json
@@ -23,6 +23,7 @@
     "@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",
     "date-fns": "^4.1.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index a54e8a0..43ec80f 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -47,6 +47,9 @@ 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
@@ -1306,6 +1309,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'}
@@ -1314,6 +1320,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'}
@@ -1385,6 +1394,10 @@ 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==}
 
@@ -1441,6 +1454,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'}
@@ -1711,10 +1728,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==}
 
@@ -2090,6 +2120,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}
@@ -2307,6 +2345,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'}
@@ -3792,12 +3833,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: {}
@@ -3873,6 +3924,10 @@ snapshots:
       color-string: 1.9.1
     optional: true
 
+  combined-stream@1.0.8:
+    dependencies:
+      delayed-stream: 1.0.0
+
   concat-map@0.0.1: {}
 
   cross-spawn@7.0.6:
@@ -3927,6 +3982,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: {}
@@ -4352,10 +4409,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:
@@ -4708,6 +4774,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
@@ -4877,6 +4949,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: {}
diff --git a/src/app/api-utlities/utilities/oriyo.client.ts b/src/app/api-utlities/utilities/oriyo.client.ts
new file mode 100644
index 0000000..291fa2c
--- /dev/null
+++ 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;
diff --git a/src/app/api/auth/login/route.ts b/src/app/api/auth/login/route.ts
index 774e8e7..df541d9 100644
--- a/src/app/api/auth/login/route.ts
+++ b/src/app/api/auth/login/route.ts
@@ -1,43 +1,28 @@
 import { NextRequest, NextResponse } from 'next/server';
+import { z } from 'zod';
 
-import { LoginData } from '@/entities/auth/model/types';
+import oriyoClient from '@/app/api-utlities/utilities/oriyo.client';
 
-export const GET = async (req: NextRequest) => {
-  if (req.method !== 'GET') {
-    return NextResponse.json(
-      { error: 'Method is not supported' },
-      { status: 405 },
-    );
-  }
-
-  const { searchParams } = req.nextUrl;
-
-  const phoneNumber = searchParams.get('phoneNumber');
-  const cardNumber = searchParams.get('cardNumber');
-  const type = searchParams.get('type');
-
-  if (!phoneNumber || !cardNumber || !type) {
-    return NextResponse.json({ error: 'Bad request' }, { status: 400 });
-  }
+export const POST = async (req: NextRequest) => {
+  const validatedBody = z
+    .object({
+      phoneNumber: z.string().min(9).max(9),
+      cardNumber: z.string().nonempty(),
+      type: z.enum(['corporate', 'bonus']),
+    })
+    .parse(req.body);
 
   try {
-    const loginRes = await fetch(
-      `https://test.oriyo.tj/api/client/login?type=${type}&phone=${phoneNumber}&uid=${cardNumber}`,
-      {
-        method: 'GET',
+    const oriyoResponse = await oriyoClient.get('/client/login', {
+      params: {
+        type: validatedBody.type,
+        phone: validatedBody.phoneNumber,
+        uid: validatedBody.cardNumber,
       },
-    );
+    });
 
-    if (!loginRes.ok) {
-      return NextResponse.json(
-        { error: 'Error during login' },
-        { status: 400 },
-      );
-    }
+    const { token } = oriyoResponse.data;
 
-    const data = (await loginRes.json()) as LoginData;
-
-    const token = data.token;
     if (!token) {
       return NextResponse.json({ error: 'No auth token' }, { status: 401 });
     }

From efae331aaf7bf51533506387fba15698472ab8e3 Mon Sep 17 00:00:00 2001
From: Umar Adilov <99314948+adilovcode@users.noreply.github.com>
Date: Thu, 1 May 2025 01:16:11 +0500
Subject: [PATCH 02/12] Added authentication support

---
 package.json                                  |  1 +
 pnpm-lock.yaml                                | 21 +++++++
 src/app/api/auth/login/route.ts               | 28 +++++-----
 .../middlewares/error-handler.middleware.ts   | 18 ++++++
 src/app/api/pages/main/route.ts               |  8 ++-
 src/entities/auth/api/login.api.ts            | 25 ++++-----
 .../auth/model/contracts/login.contract.ts    |  2 +-
 .../model/validation}/login-form.schema.ts    |  0
 .../auth/login-form/ui/login-form.tsx         | 19 +++----
 src/pages-templates/login/index.tsx           | 56 ++++++++++++++++++-
 src/shared/api/base-api.ts                    | 21 ++++++-
 src/shared/store/root-reducer.ts              |  3 -
 12 files changed, 158 insertions(+), 44 deletions(-)
 create mode 100644 src/app/api/middlewares/error-handler.middleware.ts
 rename src/{features/auth/login-form/model => entities/auth/model/validation}/login-form.schema.ts (100%)

diff --git a/package.json b/package.json
index 04d3507..6bedcc6 100644
--- a/package.json
+++ b/package.json
@@ -26,6 +26,7 @@
     "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",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 43ec80f..531d1c9 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -56,6 +56,9 @@ importers:
       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
@@ -1401,6 +1404,16 @@ packages:
   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'}
@@ -3930,6 +3943,14 @@ snapshots:
 
   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
diff --git a/src/app/api/auth/login/route.ts b/src/app/api/auth/login/route.ts
index df541d9..a51a83c 100644
--- a/src/app/api/auth/login/route.ts
+++ b/src/app/api/auth/login/route.ts
@@ -3,14 +3,16 @@ import { z } from 'zod';
 
 import oriyoClient from '@/app/api-utlities/utilities/oriyo.client';
 
-export const POST = async (req: NextRequest) => {
-  const validatedBody = z
-    .object({
-      phoneNumber: z.string().min(9).max(9),
-      cardNumber: z.string().nonempty(),
-      type: z.enum(['corporate', 'bonus']),
-    })
-    .parse(req.body);
+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', {
@@ -21,19 +23,17 @@ export const POST = async (req: NextRequest) => {
       },
     });
 
-    const { token } = oriyoResponse.data;
+    const { token } = JSON.parse(oriyoResponse.data);
 
     if (!token) {
-      return NextResponse.json({ error: 'No auth token' }, { status: 401 });
+      return NextResponse.json({ error: 'Credentials error' }, { status: 401 });
     }
 
     const response = NextResponse.json({ success: true });
 
-    response.cookies.set('token', token, {
-      httpOnly: true,
+    response.cookies.set(`${validatedBody.type}__token`, token, {
       path: '/',
       maxAge: 2 * 60 * 60,
-      secure: process.env.NODE_ENV === 'production',
     });
 
     return response;
@@ -42,3 +42,5 @@ export const POST = async (req: NextRequest) => {
     return NextResponse.json({ error: 'Server error' }, { status: 500 });
   }
 };
+
+export const POST = validationErrorHandler(routeHandler);
diff --git a/src/app/api/middlewares/error-handler.middleware.ts b/src/app/api/middlewares/error-handler.middleware.ts
new file mode 100644
index 0000000..a3046e8
--- /dev/null
+++ 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 },
+      );
+    }
+  };
diff --git a/src/app/api/pages/main/route.ts b/src/app/api/pages/main/route.ts
index f17286f..deb8f1b 100644
--- a/src/app/api/pages/main/route.ts
+++ b/src/app/api/pages/main/route.ts
@@ -7,7 +7,9 @@ import {
 import { mainPageRequest } from '@/app/api-utlities/requests/main-page.request';
 import { requestTaylor } from '@/app/api-utlities/utilities/taylor.client';
 
-export async function GET(request: Request) {
+import { validationErrorHandler } from '../../middlewares/error-handler.middleware';
+
+const routeHandler = async (request: Request) => {
   const response = await requestTaylor(mainPageRequest);
 
   return new Response(
@@ -21,4 +23,6 @@ export async function GET(request: Request) {
       headers: { 'Content-Type': 'application/json' },
     },
   );
-}
+};
+
+export const GET = validationErrorHandler(routeHandler);
diff --git a/src/entities/auth/api/login.api.ts b/src/entities/auth/api/login.api.ts
index 99ad4ed..5760186 100644
--- a/src/entities/auth/api/login.api.ts
+++ b/src/entities/auth/api/login.api.ts
@@ -1,24 +1,23 @@
-import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
+import { baseAPI } from '@/shared/api/base-api';
 
 import { LoginParams, LoginResponse } from '../model/contracts/login.contract';
 
-export const loginAPI = createApi({
-  baseQuery: fetchBaseQuery({ baseUrl: '/api' }),
-  endpoints: (build) => ({
-    login: build.query<LoginResponse, LoginParams>({
+export const authenticationApi = baseAPI.injectEndpoints({
+  endpoints: (builder) => ({
+    login: builder.query<LoginResponse, LoginParams>({
       query: (data) => {
-        const params = new URLSearchParams({
-          type: data.type,
-          phoneNumber: data.phoneNumber,
-          cardNumber: data.cardNumber,
-        }).toString();
-
         return {
-          url: `/auth/login?${params}`,
+          method: 'POST',
+          body: {
+            type: data.type,
+            phoneNumber: data.phoneNumber,
+            cardNumber: data.cardNumber,
+          },
+          url: '/auth/login',
         };
       },
     }),
   }),
 });
 
-export const { useLazyLoginQuery } = loginAPI;
+export const { useLazyLoginQuery } = authenticationApi;
diff --git a/src/entities/auth/model/contracts/login.contract.ts b/src/entities/auth/model/contracts/login.contract.ts
index cb3a3da..b315099 100644
--- a/src/entities/auth/model/contracts/login.contract.ts
+++ b/src/entities/auth/model/contracts/login.contract.ts
@@ -1,4 +1,4 @@
-import { LoginFormData } from '@/features/auth/login-form/model/login-form.schema';
+import { LoginFormData } from '@/entities/auth/model/validation/login-form.schema';
 
 export interface LoginResponse {
   success: boolean;
diff --git a/src/features/auth/login-form/model/login-form.schema.ts b/src/entities/auth/model/validation/login-form.schema.ts
similarity index 100%
rename from src/features/auth/login-form/model/login-form.schema.ts
rename to src/entities/auth/model/validation/login-form.schema.ts
diff --git a/src/features/auth/login-form/ui/login-form.tsx b/src/features/auth/login-form/ui/login-form.tsx
index 30d7044..1af10a3 100644
--- a/src/features/auth/login-form/ui/login-form.tsx
+++ b/src/features/auth/login-form/ui/login-form.tsx
@@ -19,7 +19,10 @@ import {
 } from '@/shared/shadcn-ui/form';
 import { Input } from '@/shared/shadcn-ui/input';
 
-import { LoginFormData, loginFormSchema } from '../model/login-form.schema';
+import {
+  LoginFormData,
+  loginFormSchema,
+} from '../../../../entities/auth/model/validation/login-form.schema';
 
 interface LoginFormProps {
   type: 'bonus' | 'corporate';
@@ -40,16 +43,12 @@ export const LoginForm = ({ type }: LoginFormProps) => {
   });
 
   const onSubmit = async (data: LoginFormData) => {
-    try {
-      await login({ ...data, type }).unwrap();
+    await login({ ...data, type }).unwrap();
 
-      toast.success('Logged in successfully!');
-      router.push(
-        type === 'bonus' ? '/customer-dashboard' : '/corporate-dashboard',
-      );
-    } catch (error) {
-      toast.error('An error occured during login');
-    }
+    toast.success('Logged in successfully!');
+    router.push(
+      type === 'bonus' ? '/customer-dashboard' : '/corporate-dashboard',
+    );
   };
 
   return (
diff --git a/src/pages-templates/login/index.tsx b/src/pages-templates/login/index.tsx
index 23046b4..c248838 100644
--- a/src/pages-templates/login/index.tsx
+++ b/src/pages-templates/login/index.tsx
@@ -1,11 +1,14 @@
 '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 { useTextController } from '@/shared/language/hooks/use-text-controller';
+import { Button } from '@/shared/shadcn-ui/button';
 import {
   Card,
   CardContent,
@@ -39,6 +42,13 @@ const tabs = [
 
 export default function LoginPage() {
   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'>
@@ -55,7 +65,12 @@ export default function LoginPage() {
           </div>
 
           <div className='mx-auto max-w-lg'>
-            <Tabs defaultValue='bonus' className='w-full'>
+            <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 (
@@ -71,6 +86,45 @@ export default function LoginPage() {
               </TabsList>
 
               {tabs.map((tab) => {
+                const tabCookieName = `${tab.type}__token`;
+
+                const authenticationCookie = getCookie(tabCookieName);
+
+                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>
diff --git a/src/shared/api/base-api.ts b/src/shared/api/base-api.ts
index 5ecaa52..71616da 100644
--- 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: () => ({}),
 });
diff --git a/src/shared/store/root-reducer.ts b/src/shared/store/root-reducer.ts
index 56b999c..1b1a8cd 100644
--- a/src/shared/store/root-reducer.ts
+++ b/src/shared/store/root-reducer.ts
@@ -1,10 +1,7 @@
 import { combineReducers } from '@reduxjs/toolkit';
 
-import { loginAPI } from '@/entities/auth/api/login.api';
-
 import { baseAPI } from '@/shared/api/base-api';
 
 export const rootReducer = combineReducers({
   [baseAPI.reducerPath]: baseAPI.reducer,
-  [loginAPI.reducerPath]: loginAPI.reducer,
 });

From 3142023c7938a06276df488622840fafe894624a Mon Sep 17 00:00:00 2001
From: Umar Adilov <99314948+adilovcode@users.noreply.github.com>
Date: Thu, 1 May 2025 01:45:12 +0500
Subject: [PATCH 03/12] Loading bonus clients from API

---
 src/app/api/auth/login/route.ts               |  14 +-
 src/app/api/bonus/info/route.ts               |  31 ++++
 src/entities/bonus/api/bonus.api.ts           |  17 +++
 .../model/types/bonus-client-info.type.ts     |   8 +
 .../(dashboard)/customer-dashboard/index.tsx  | 137 +++++++++---------
 5 files changed, 133 insertions(+), 74 deletions(-)
 create mode 100644 src/app/api/bonus/info/route.ts
 create mode 100644 src/entities/bonus/api/bonus.api.ts
 create mode 100644 src/entities/bonus/model/types/bonus-client-info.type.ts

diff --git a/src/app/api/auth/login/route.ts b/src/app/api/auth/login/route.ts
index a51a83c..7dbe591 100644
--- a/src/app/api/auth/login/route.ts
+++ b/src/app/api/auth/login/route.ts
@@ -23,7 +23,7 @@ const routeHandler = async (req: NextRequest) => {
       },
     });
 
-    const { token } = JSON.parse(oriyoResponse.data);
+    const { token, card_id } = JSON.parse(oriyoResponse.data);
 
     if (!token) {
       return NextResponse.json({ error: 'Credentials error' }, { status: 401 });
@@ -31,10 +31,14 @@ const routeHandler = async (req: NextRequest) => {
 
     const response = NextResponse.json({ success: true });
 
-    response.cookies.set(`${validatedBody.type}__token`, token, {
-      path: '/',
-      maxAge: 2 * 60 * 60,
-    });
+    response.cookies.set(
+      `${validatedBody.type}__token`,
+      JSON.stringify({ token, card_id }),
+      {
+        path: '/',
+        maxAge: 2 * 60 * 60,
+      },
+    );
 
     return response;
   } catch (error) {
diff --git a/src/app/api/bonus/info/route.ts b/src/app/api/bonus/info/route.ts
new file mode 100644
index 0000000..efb8011
--- /dev/null
+++ 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);
diff --git a/src/entities/bonus/api/bonus.api.ts b/src/entities/bonus/api/bonus.api.ts
new file mode 100644
index 0000000..b8d31bf
--- /dev/null
+++ 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;
diff --git a/src/entities/bonus/model/types/bonus-client-info.type.ts b/src/entities/bonus/model/types/bonus-client-info.type.ts
new file mode 100644
index 0000000..dd7138f
--- /dev/null
+++ 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;
+}
diff --git a/src/pages-templates/(dashboard)/customer-dashboard/index.tsx b/src/pages-templates/(dashboard)/customer-dashboard/index.tsx
index d4181a1..2e0a319 100644
--- a/src/pages-templates/(dashboard)/customer-dashboard/index.tsx
+++ b/src/pages-templates/(dashboard)/customer-dashboard/index.tsx
@@ -2,6 +2,8 @@
 
 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 {
@@ -14,20 +16,11 @@ import {
 
 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 function CustomerDashboard() {
   const { t } = useTextController();
 
+  const { data, isLoading } = useFetchMyBonusInfoQuery({});
+
   return (
     <div className='flex min-h-screen flex-col'>
       <main className='flex-1 py-10'>
@@ -41,35 +34,44 @@ export function CustomerDashboard() {
           </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' />
-                  {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'>
-                    {customerData.bonusPoints}
-                  </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')}</span>
-                  </div>
-                  <ArrowUpRight className='h-5 w-5 text-white/60' />
-                </div>
-              </CardContent>
+              {!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'>
@@ -79,40 +81,37 @@ export function CustomerDashboard() {
                 </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('customer.infoCard.regDateLabel')}
-                      </p>
-                      <p className='font-medium'>
-                        {customerData.firstName} {customerData.lastName}
-                      </p>
+                {!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 className='space-y-1'>
-                      <p className='text-sm text-gray-500'>
-                        {t('customer.infoCard.regDateLabel')}
-                      </p>
-                      <p className='font-medium'>
-                        {customerData.registrationDate}
-                      </p>
+                    <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>
-                  <div>
-                    <div className='mb-4 space-y-1'>
-                      <p className='text-sm text-gray-500'>
-                        {t('customer.infoCard.cardNumberLabel')}
-                      </p>
-                      <p className='font-medium'>{customerData.cardNumber}</p>
-                    </div>
-                    <div className='mb-4 space-y-1'>
-                      <p className='text-sm text-gray-500'>
-                        {t('customer.infoCard.expiryDateLabel')}
-                      </p>
-                      <p className='font-medium'>{customerData.expiryDate}</p>
-                    </div>
-                  </div>
-                </div>
+                )}
               </CardContent>
             </Card>
           </div>

From e98c079ba674147a0d8d6d955bce7478936bd829 Mon Sep 17 00:00:00 2001
From: khadiatullo <hadatullobabakulov28@gmail.com>
Date: Thu, 1 May 2025 00:58:42 +0300
Subject: [PATCH 04/12] change: change the text

---
 src/pages-templates/clients/loyalty/index.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/pages-templates/clients/loyalty/index.tsx b/src/pages-templates/clients/loyalty/index.tsx
index b47394f..24140d5 100644
--- a/src/pages-templates/clients/loyalty/index.tsx
+++ b/src/pages-templates/clients/loyalty/index.tsx
@@ -245,7 +245,7 @@ export function LoyaltyPage() {
                     <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')}
+                        {t('clients.loyalty.works.levels.card-2.bonus-1')}
                       </span>
                     </li>
                     <li className='flex items-center'>
@@ -257,13 +257,13 @@ export function LoyaltyPage() {
                     <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')}
+                        {t('clients.loyalty.works.levels.card-2.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')}
+                        {t('clients.loyalty.works.levels.card-2.bonus-4')}
                       </span>
                     </li>
                   </ul>

From cad373568e7ce6370a0185f59159a6cdc9871f96 Mon Sep 17 00:00:00 2001
From: khadiatullo <hadatullobabakulov28@gmail.com>
Date: Thu, 1 May 2025 05:14:46 +0300
Subject: [PATCH 05/12] update: added adaptability for pages

---
 src/app/layout.tsx                            |   2 +-
 .../(dashboard)/corporate-dashboard/index.tsx |   2 +-
 .../(dashboard)/customer-dashboard/index.tsx  |   2 +-
 src/pages-templates/about/index.tsx           | 403 +++++++------
 src/pages-templates/charity/index.tsx         | 361 ++++++------
 .../clients/certificates/index.tsx            |   5 +-
 src/pages-templates/clients/index.tsx         |  21 +-
 src/pages-templates/clients/loyalty/index.tsx | 550 +++++++++---------
 src/pages-templates/login/index.tsx           | 169 +++---
 src/shared/shadcn-ui/conteiner.tsx            |  10 +
 src/widgets/about-page/station-gallery.tsx    |   2 +-
 src/widgets/clients/ui/benefits-section.tsx   |  75 +--
 .../clients/ui/services-overview-section.tsx  |  67 ++-
 src/widgets/footer.tsx                        | 212 +++----
 14 files changed, 972 insertions(+), 909 deletions(-)
 create mode 100644 src/shared/shadcn-ui/conteiner.tsx

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 7766960..6406af6 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -37,7 +37,7 @@ export default async function RootLayout({
       className='scroll-smooth'
       style={{ scrollBehavior: 'smooth' }}
     >
-      <body className={`${inter.className} antialiased`}>
+      <body className={`${inter.className} antialiased min-w-2xs`}>
         <Providers textItems={response.data as TextItem[]}>
           <Header />
           {children}
diff --git a/src/pages-templates/(dashboard)/corporate-dashboard/index.tsx b/src/pages-templates/(dashboard)/corporate-dashboard/index.tsx
index 9e54f4a..a99a4e3 100644
--- a/src/pages-templates/(dashboard)/corporate-dashboard/index.tsx
+++ b/src/pages-templates/(dashboard)/corporate-dashboard/index.tsx
@@ -97,7 +97,7 @@ export function CorporateDashboard() {
   const { t } = useTextController();
 
   return (
-    <div className='flex min-h-screen flex-col'>
+    <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'>
diff --git a/src/pages-templates/(dashboard)/customer-dashboard/index.tsx b/src/pages-templates/(dashboard)/customer-dashboard/index.tsx
index 2e0a319..8a5aca8 100644
--- a/src/pages-templates/(dashboard)/customer-dashboard/index.tsx
+++ b/src/pages-templates/(dashboard)/customer-dashboard/index.tsx
@@ -22,7 +22,7 @@ export function CustomerDashboard() {
   const { data, isLoading } = useFetchMyBonusInfoQuery({});
 
   return (
-    <div className='flex min-h-screen flex-col'>
+    <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'>
diff --git a/src/pages-templates/about/index.tsx b/src/pages-templates/about/index.tsx
index 52cdf82..11366c0 100644
--- a/src/pages-templates/about/index.tsx
+++ b/src/pages-templates/about/index.tsx
@@ -13,6 +13,7 @@ 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',
@@ -36,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'>
@@ -52,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'>
@@ -113,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'>
@@ -139,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>
diff --git a/src/pages-templates/charity/index.tsx b/src/pages-templates/charity/index.tsx
index 43abbd3..c33997e 100644
--- a/src/pages-templates/charity/index.tsx
+++ b/src/pages-templates/charity/index.tsx
@@ -21,6 +21,7 @@ import {
 } from '@/shared/shadcn-ui/card';
 
 import { CtaSection } from '@/widgets/cta-section';
+import Container from '@/shared/shadcn-ui/conteiner';
 
 export const metadata = {
   title: 'Благотворительность | GasNetwork - Сеть заправок в Таджикистане',
@@ -46,68 +47,72 @@ export function CharityPage() {
               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' />
+              <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>
-                  <h1 className='text-4xl font-bold tracking-tight sm:text-5xl md:text-6xl'>
-                    {t('charity.hero.title')}
-                  </h1>
-                  <p className='text-xl text-gray-200'>
-                    {t('charity.hero.subtitle')}
-                  </p>
                 </div>
-              </div>
+              </Container>
             </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'>
-                  {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>
+        <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 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>
+                <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 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>
+          </section>
+        </Container>
 
         {/* Key Figures */}
         <section className='bg-red-600 py-16 text-white'>
@@ -136,140 +141,146 @@ export function CharityPage() {
         </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' />
+        <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>
-              <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'>
-                  <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 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>
-                    <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'>
-                      {t(`charity.events.button`)}
-                    </Button>
-                  </CardFooter>
-                </Card>
-              ))}
+                    <CardFooter>
+                      <Button className='w-full bg-red-600 hover:bg-red-700'>
+                        {t(`charity.events.button`)}
+                      </Button>
+                    </CardFooter>
+                  </Card>
+                ))}
+              </div>
             </div>
-          </div>
-        </section>
+          </section>
+        </Container>
 
         {/* 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' />
+        <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>
-              <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 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>
-          </div>
-        </section>
+          </section>
+        </Container>
         <CtaSection />
       </main>
     </div>
diff --git a/src/pages-templates/clients/certificates/index.tsx b/src/pages-templates/clients/certificates/index.tsx
index d6db9da..0d20136 100644
--- a/src/pages-templates/clients/certificates/index.tsx
+++ b/src/pages-templates/clients/certificates/index.tsx
@@ -6,6 +6,7 @@ import Image from 'next/image';
 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 } = useTextController();
@@ -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>
   );
 }
diff --git a/src/pages-templates/clients/index.tsx b/src/pages-templates/clients/index.tsx
index 2235798..c63d125 100644
--- a/src/pages-templates/clients/index.tsx
+++ b/src/pages-templates/clients/index.tsx
@@ -7,6 +7,7 @@ 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 Container from '@/shared/shadcn-ui/conteiner';
 
 export const metadata = {
   title: 'Клиентам | GasNetwork - Сеть заправок в Таджикистане',
@@ -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>
diff --git a/src/pages-templates/clients/loyalty/index.tsx b/src/pages-templates/clients/loyalty/index.tsx
index b47394f..141fd5a 100644
--- a/src/pages-templates/clients/loyalty/index.tsx
+++ b/src/pages-templates/clients/loyalty/index.tsx
@@ -7,6 +7,7 @@ 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 - Сеть заправок в Таджикистане',
@@ -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>
diff --git a/src/pages-templates/login/index.tsx b/src/pages-templates/login/index.tsx
index c248838..712d049 100644
--- a/src/pages-templates/login/index.tsx
+++ b/src/pages-templates/login/index.tsx
@@ -22,6 +22,7 @@ import {
   TabsList,
   TabsTrigger,
 } from '@/shared/shadcn-ui/tabs';
+import Container from '@/shared/shadcn-ui/conteiner';
 
 const tabs = [
   {
@@ -51,107 +52,109 @@ export default function LoginPage() {
   };
 
   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-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'>
+            <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>
+
                 {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>
+                  const tabCookieName = `${tab.type}__token`;
 
-              {tabs.map((tab) => {
-                const tabCookieName = `${tab.type}__token`;
+                  const authenticationCookie = getCookie(tabCookieName);
 
-                const authenticationCookie = getCookie(tabCookieName);
+                  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>
+                    );
+                  }
 
-                if (authenticationCookie) {
                   return (
                     <TabsContent key={tab.label} value={tab.type}>
                       <Card>
                         <CardHeader>
                           <CardTitle>{t(tab.title)}</CardTitle>
+                          <CardDescription>{t(tab.description)}</CardDescription>
                         </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 className='space-y-4'>
+                          <LoginForm type={tab.type} />
                         </CardContent>
                       </Card>
                     </TabsContent>
                   );
-                }
+                })}
+              </Tabs>
 
-                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 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>
   );
 }
diff --git a/src/shared/shadcn-ui/conteiner.tsx b/src/shared/shadcn-ui/conteiner.tsx
new file mode 100644
index 0000000..43ea538
--- /dev/null
+++ 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>
+    )
+}
\ No newline at end of file
diff --git a/src/widgets/about-page/station-gallery.tsx b/src/widgets/about-page/station-gallery.tsx
index 16bfa53..c47b752 100644
--- a/src/widgets/about-page/station-gallery.tsx
+++ b/src/widgets/about-page/station-gallery.tsx
@@ -76,7 +76,7 @@ export function StationGallery() {
   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'}
diff --git a/src/widgets/clients/ui/benefits-section.tsx b/src/widgets/clients/ui/benefits-section.tsx
index 6577102..229d6ae 100644
--- a/src/widgets/clients/ui/benefits-section.tsx
+++ b/src/widgets/clients/ui/benefits-section.tsx
@@ -4,6 +4,7 @@ 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;
@@ -33,46 +34,48 @@ export const BenefitsSection = () => {
   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>
   );
 };
diff --git a/src/widgets/clients/ui/services-overview-section.tsx b/src/widgets/clients/ui/services-overview-section.tsx
index e212173..f32bdd5 100644
--- a/src/widgets/clients/ui/services-overview-section.tsx
+++ b/src/widgets/clients/ui/services-overview-section.tsx
@@ -11,6 +11,7 @@ import {
   CardHeader,
   CardTitle,
 } from '@/shared/shadcn-ui/card';
+import Container from '@/shared/shadcn-ui/conteiner';
 
 interface ServiceOverview {
   title: string;
@@ -49,39 +50,41 @@ export const ServicesOverviewSection = () => {
   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>
   );
 };
diff --git a/src/widgets/footer.tsx b/src/widgets/footer.tsx
index c921b99..856aee1 100644
--- a/src/widgets/footer.tsx
+++ b/src/widgets/footer.tsx
@@ -11,113 +11,119 @@ export const Footer = () => {
   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'>{t('common.name')}</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'>

From 2ed7f075208c466b9633a59a7354e695a7577096 Mon Sep 17 00:00:00 2001
From: khadiatullo <hadatullobabakulov28@gmail.com>
Date: Thu, 1 May 2025 05:38:29 +0300
Subject: [PATCH 06/12] update: add  adaptability for pages

---
 src/pages-templates/clients/loyalty/index.tsx | 223 +++++++++---------
 1 file changed, 112 insertions(+), 111 deletions(-)

diff --git a/src/pages-templates/clients/loyalty/index.tsx b/src/pages-templates/clients/loyalty/index.tsx
index f1dd46f..4dd4902 100644
--- a/src/pages-templates/clients/loyalty/index.tsx
+++ b/src/pages-templates/clients/loyalty/index.tsx
@@ -181,29 +181,107 @@ export function LoyaltyPage() {
               </div>
             </div>
           </div>
-        </section>
+          </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>
+          {/* 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'>
+                <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-2.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-2.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-2.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-1.title')}
+                      {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-1.percent')}
+                        {t('clients.loyalty.works.levels.card-3.percent')}
                       </span>
                       <p className='text-sm text-gray-600'>
                         {t('clients.loyalty.works.levels.card.mark')}
@@ -213,117 +291,40 @@ export function LoyaltyPage() {
                       <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')}
+                          {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-1.bonus-2')}
+                          {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-1.bonus-3')}
+                          {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>
-
-                <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-2.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-2.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-2.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>
-          </div>
-        </section>
+          </section>
+        </Container>
 
         <CtaSection />
       </main>

From 2dfcdd096e7d501315c4bf9554df14ee1fbb0006 Mon Sep 17 00:00:00 2001
From: khadiatullo <hadatullobabakulov28@gmail.com>
Date: Thu, 1 May 2025 07:31:37 +0300
Subject: [PATCH 07/12] update: added animation for blocks

---
 .../(dashboard)/corporate-dashboard/index.tsx |   4 +-
 .../(dashboard)/customer-dashboard/index.tsx  |   4 +-
 src/pages-templates/about/index.tsx           |  12 +--
 src/pages-templates/charity/index.tsx         |   2 +-
 .../clients/certificates/index.tsx            |   1 +
 src/pages-templates/clients/index.tsx         |   2 +-
 src/pages-templates/clients/loyalty/index.tsx | 102 +++++++++---------
 src/pages-templates/login/index.tsx           |   2 +-
 src/widgets/clients/ui/benefits-section.tsx   |   4 +-
 .../clients/ui/services-overview-section.tsx  |   2 +-
 10 files changed, 68 insertions(+), 67 deletions(-)

diff --git a/src/pages-templates/(dashboard)/corporate-dashboard/index.tsx b/src/pages-templates/(dashboard)/corporate-dashboard/index.tsx
index a99a4e3..02ddedd 100644
--- a/src/pages-templates/(dashboard)/corporate-dashboard/index.tsx
+++ b/src/pages-templates/(dashboard)/corporate-dashboard/index.tsx
@@ -110,7 +110,7 @@ export function CorporateDashboard() {
 
           <div className='mb-10 grid gap-3 md:grid-cols-3 md:gap-6'>
             {/* Company Card */}
-            <Card className='md:col-span-2'>
+            <Card data-aos='zoom-in' data-aos-mirror="true" 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' />
@@ -166,7 +166,7 @@ export function CorporateDashboard() {
             </Card>
 
             {/* Fund Card */}
-            <Card className='bg-gradient-to-br from-red-600 to-red-800 text-white'>
+            <Card data-aos='zoom-in' data-aos-mirror="true" 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' />
diff --git a/src/pages-templates/(dashboard)/customer-dashboard/index.tsx b/src/pages-templates/(dashboard)/customer-dashboard/index.tsx
index 8a5aca8..97a7225 100644
--- a/src/pages-templates/(dashboard)/customer-dashboard/index.tsx
+++ b/src/pages-templates/(dashboard)/customer-dashboard/index.tsx
@@ -34,7 +34,7 @@ export function CustomerDashboard() {
           </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'>
+            <Card data-aos="zoom-in"  data-aos-mirror="true" className='bg-gradient-to-br from-red-600 to-red-800 text-white'>
               {!data || isLoading ? (
                 // TODO: Bunyod please add loader here
                 <>Loader here</>
@@ -73,7 +73,7 @@ export function CustomerDashboard() {
 
             {/* Bonus Card */}
             {/* Customer Card */}
-            <Card className='md:col-span-2'>
+            <Card data-aos="zoom-in" data-aos-mirror="true"  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' />
diff --git a/src/pages-templates/about/index.tsx b/src/pages-templates/about/index.tsx
index 11366c0..0990226 100644
--- a/src/pages-templates/about/index.tsx
+++ b/src/pages-templates/about/index.tsx
@@ -38,7 +38,7 @@ export default function AboutPage() {
               priority
             />
             <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 data-aos='fade-down' data-aos-duration="1000" 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('about.hero.title')}
@@ -57,7 +57,7 @@ export default function AboutPage() {
           <section className='py-16'>
             <div className='container mx-auto'>
               <div className='grid items-center gap-12 md:grid-cols-2'>
-                <div>
+                <div data-aos='fade-right'>
                   <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>
@@ -92,7 +92,7 @@ export default function AboutPage() {
                     ))}
                   </div>
                 </div>
-                <div className='relative h-[500px] overflow-hidden rounded-xl shadow-xl'>
+                <div data-aos="zoom-out-right" className='relative h-[500px] overflow-hidden rounded-xl shadow-xl'>
                   <Image
                     src='/placeholder.svg?height=500&width=600&text=Главный+офис'
                     alt={t('about.overview.imageAlt')}
@@ -210,7 +210,7 @@ export default function AboutPage() {
                 </p>
               </div>
 
-              <div className='grid gap-8 md:grid-cols-3'>
+              <div data-aos='flip-up' data-aos-duration='600' className='grid gap-8 md:grid-cols-3'>
                 {[0, 1, 2].map((index) => (
                   <Card
                     key={index}
@@ -250,7 +250,7 @@ export default function AboutPage() {
                 </p>
               </div>
 
-              <div className='grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-4'>
+              <div data-aos='flip-down' data-aos-duration='600' className='grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-4'>
                 {[0, 1, 2, 3].map((index) => (
                   <div
                     key={index}
@@ -296,7 +296,7 @@ export default function AboutPage() {
                 </p>
               </div>
 
-              <div className='grid gap-8 md:grid-cols-3'>
+              <div data-aos="zoom-out-right" className='grid gap-8 md:grid-cols-3'>
                 {[0, 1, 2].map((index) => (
                   <Card
                     key={index}
diff --git a/src/pages-templates/charity/index.tsx b/src/pages-templates/charity/index.tsx
index c33997e..0638bb3 100644
--- a/src/pages-templates/charity/index.tsx
+++ b/src/pages-templates/charity/index.tsx
@@ -48,7 +48,7 @@ export function CharityPage() {
             />
             <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 data-aos='fade-down' data-aos-duration='800' 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' />
diff --git a/src/pages-templates/clients/certificates/index.tsx b/src/pages-templates/clients/certificates/index.tsx
index 0d20136..1f6b6ff 100644
--- a/src/pages-templates/clients/certificates/index.tsx
+++ b/src/pages-templates/clients/certificates/index.tsx
@@ -77,6 +77,7 @@ export function CertificatesPage() {
         <div className='grid gap-8 md:grid-cols-2 lg:grid-cols-3'>
           {certificates.map((certificate) => (
             <Card
+              data-aos='zoom-in'
               key={certificate.id}
               className='overflow-hidden transition-all duration-300 hover:shadow-lg'
             >
diff --git a/src/pages-templates/clients/index.tsx b/src/pages-templates/clients/index.tsx
index c63d125..42eb934 100644
--- a/src/pages-templates/clients/index.tsx
+++ b/src/pages-templates/clients/index.tsx
@@ -34,7 +34,7 @@ export function ClientsPage() {
             />
             <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 data-aos='fade-down' data-aos-duration="1000" 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')}
diff --git a/src/pages-templates/clients/loyalty/index.tsx b/src/pages-templates/clients/loyalty/index.tsx
index 4dd4902..ac740c1 100644
--- a/src/pages-templates/clients/loyalty/index.tsx
+++ b/src/pages-templates/clients/loyalty/index.tsx
@@ -34,7 +34,7 @@ export function LoyaltyPage() {
             />
             <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 data-aos='fade-down' data-aos-duration="800" 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')}
@@ -54,7 +54,7 @@ export function LoyaltyPage() {
           <section className='py-16'>
             <div className='container mx-auto'>
               <div className='grid items-center gap-12 md:grid-cols-2'>
-                <div>
+                <div data-aos='fade-right'>
                   <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>
@@ -110,7 +110,7 @@ export function LoyaltyPage() {
                     </div>
                   </div>
                 </div>
-                <div className='relative h-[400px] overflow-hidden rounded-xl shadow-xl'>
+                <div data-aos='fade-up' className='relative h-[400px] overflow-hidden rounded-xl shadow-xl'>
                   <Image
                     src='/placeholder.svg?height=400&width=600&text=Программа+лояльности'
                     alt='Программа лояльности'
@@ -134,7 +134,7 @@ export function LoyaltyPage() {
                 </p>
               </div>
 
-            <div className='grid gap-8 md:grid-cols-4'>
+            <div data-aos='zoom-in-right' 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
@@ -195,7 +195,7 @@ export function LoyaltyPage() {
                 </p>
               </div>
 
-                <div className='grid gap-8 md:grid-cols-3'>
+                <div data-aos='flip-down' 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'>
@@ -274,53 +274,53 @@ export function LoyaltyPage() {
                     </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')}
+                  <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>
-                      </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>
+                        <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>
diff --git a/src/pages-templates/login/index.tsx b/src/pages-templates/login/index.tsx
index 712d049..ac51ec6 100644
--- a/src/pages-templates/login/index.tsx
+++ b/src/pages-templates/login/index.tsx
@@ -66,7 +66,7 @@ export default function LoginPage() {
               <p className='max-w-2xl text-gray-600'>{t('auth.description')}</p>
             </div>
 
-            <div className='mx-auto max-w-lg'>
+            <div data-aos='zoom-in' className='mx-auto max-w-lg'>
               <Tabs
                 defaultValue={defaultTab}
                 value={defaultTab}
diff --git a/src/widgets/clients/ui/benefits-section.tsx b/src/widgets/clients/ui/benefits-section.tsx
index 229d6ae..3ce4fbd 100644
--- a/src/widgets/clients/ui/benefits-section.tsx
+++ b/src/widgets/clients/ui/benefits-section.tsx
@@ -38,7 +38,7 @@ export const BenefitsSection = () => {
       <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 data-aos='fade-right' data-aos-duration='4000' 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>
@@ -65,7 +65,7 @@ export const BenefitsSection = () => {
                 })}
               </div>
             </div>
-            <div className='relative order-1 h-[400px] overflow-hidden rounded-xl shadow-xl md:order-2'>
+            <div data-aos='fade-up' 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='Преимущества для клиентов'
diff --git a/src/widgets/clients/ui/services-overview-section.tsx b/src/widgets/clients/ui/services-overview-section.tsx
index f32bdd5..faa7e4f 100644
--- a/src/widgets/clients/ui/services-overview-section.tsx
+++ b/src/widgets/clients/ui/services-overview-section.tsx
@@ -62,7 +62,7 @@ export const ServicesOverviewSection = () => {
             </p>
           </div>
 
-          <div className='grid gap-3 md:grid-cols-2 md:gap-6 lg:grid-cols-3'>
+          <div data-aos='flip-up' data-aos-duration='600' className='grid gap-3 md:grid-cols-2 md:gap-6 lg:grid-cols-3'>
             {servicesOverview.map(({ description, Icon, contentText, title }) => {
               return (
                 <Card

From b4236db5d564a415653eb6295b35b9a949f3acda Mon Sep 17 00:00:00 2001
From: Umar Adilov <99314948+adilovcode@users.noreply.github.com>
Date: Thu, 1 May 2025 21:10:12 +0500
Subject: [PATCH 08/12] Added api for about us page

---
 src/app/api-utlities/@types/index.ts          | 12 +++++++++
 src/app/api-utlities/presenters/index.ts      | 26 ++++++++++++++++---
 .../requests/about-us-page.request.ts         |  6 +++++
 src/app/api-utlities/requests/common.ts       | 22 ++++++++++++++++
 src/app/api/pages/about-us/route.ts           | 24 +++++++++++++++++
 5 files changed, 87 insertions(+), 3 deletions(-)
 create mode 100644 src/app/api-utlities/requests/about-us-page.request.ts
 create mode 100644 src/app/api/pages/about-us/route.ts

diff --git a/src/app/api-utlities/@types/index.ts b/src/app/api-utlities/@types/index.ts
index f650de7..e6efdc1 100644
--- a/src/app/api-utlities/@types/index.ts
+++ b/src/app/api-utlities/@types/index.ts
@@ -53,3 +53,15 @@ export type TextResponse = Root<{
   _name: string;
   _znachenie: string | null;
 }>;
+
+export type Team = Root<{
+  _foto: Image[];
+  _zvanie: string;
+  _name: string;
+}>;
+
+export type History = Root<{
+  _name: string;
+  _god: string;
+  _opisanie: string;
+}>;
diff --git a/src/app/api-utlities/presenters/index.ts b/src/app/api-utlities/presenters/index.ts
index a71189e..182986c 100644
--- a/src/app/api-utlities/presenters/index.ts
+++ b/src/app/api-utlities/presenters/index.ts
@@ -2,16 +2,22 @@ import { isEmpty } from 'lodash';
 
 import {
   Discount,
+  History,
   Image,
   Job,
   Partner,
+  Select,
   Station,
+  Team,
   TextResponse,
 } from '../@types';
 
 export const presentImage = (images: Image[]) =>
   isEmpty(images) ? null : `${process.env.TAYLOR_MEDIA_URL}/${images[0].url}`;
 
+export const presentSelect = (selectItems: Select[]) =>
+  !isEmpty(selectItems) ? selectItems[0].name : null;
+
 export const presentPartners = (partners: Partner) =>
   partners.records.map((record) => ({
     name: record._name,
@@ -22,8 +28,22 @@ export const presentJobs = (jobs: Job) =>
   jobs.records.map((job) => ({
     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,
+    location: presentSelect(job._localtio),
+    type: presentSelect(job._type),
+  }));
+
+export const presentTeamMembers = (members: Team) =>
+  members.records.map((member) => ({
+    name: member._name,
+    photo: presentImage(member._foto),
+    profession: member._zvanie,
+  }));
+
+export const presentHistoryItems = (historyItems: History) =>
+  historyItems.records.map((item) => ({
+    name: item._name,
+    year: item._god,
+    description: item._opisanie,
   }));
 
 export const presentDiscounts = (discounts: Discount) =>
@@ -50,7 +70,7 @@ export const presentStations = (stations: Station) =>
     electricCharge: station._propanCopy || false,
     miniMarket: station._zaryadnayaStanci || false,
     toilet: station._miniMarketCop || false,
-    region: !isEmpty(station._region) ? station._region[0].name : null,
+    region: presentSelect(station._region),
     image: presentImage(station._foto),
   }));
 
diff --git a/src/app/api-utlities/requests/about-us-page.request.ts b/src/app/api-utlities/requests/about-us-page.request.ts
new file mode 100644
index 0000000..2504158
--- /dev/null
+++ b/src/app/api-utlities/requests/about-us-page.request.ts
@@ -0,0 +1,6 @@
+import { historyRequest, teamRequest } from './common';
+
+export const aboutUsPageRequest = {
+  ...teamRequest,
+  ...historyRequest,
+};
diff --git a/src/app/api-utlities/requests/common.ts b/src/app/api-utlities/requests/common.ts
index ff001c0..30d6abd 100644
--- a/src/app/api-utlities/requests/common.ts
+++ b/src/app/api-utlities/requests/common.ts
@@ -76,3 +76,25 @@ export const textsRequest = {
     },
   },
 };
+
+export const teamRequest = {
+  _komanda: {
+    records: {
+      _foto: {
+        url: true,
+      },
+      _zvanie: true,
+      _name: true,
+    },
+  },
+};
+
+export const historyRequest = {
+  _istoriya: {
+    records: {
+      _name: true,
+      _god: true,
+      _opisanie: true,
+    },
+  },
+};
diff --git a/src/app/api/pages/about-us/route.ts b/src/app/api/pages/about-us/route.ts
new file mode 100644
index 0000000..fbba11c
--- /dev/null
+++ b/src/app/api/pages/about-us/route.ts
@@ -0,0 +1,24 @@
+import {
+  presentHistoryItems,
+  presentTeamMembers,
+} from '@/app/api-utlities/presenters';
+import { aboutUsPageRequest } from '@/app/api-utlities/requests/about-us-page.request';
+import { requestTaylor } from '@/app/api-utlities/utilities/taylor.client';
+
+import { validationErrorHandler } from '../../middlewares/error-handler.middleware';
+
+const routeHandler = async () => {
+  const response = await requestTaylor(aboutUsPageRequest);
+
+  return new Response(
+    JSON.stringify({
+      team: presentTeamMembers(response.data._komanda),
+      history: presentHistoryItems(response.data._istoriya),
+    }),
+    {
+      headers: { 'Content-Type': 'application/json' },
+    },
+  );
+};
+
+export const GET = validationErrorHandler(routeHandler);

From 148fd20b66eb228db1c47978e0be63870557a796 Mon Sep 17 00:00:00 2001
From: Umar Adilov <99314948+adilovcode@users.noreply.github.com>
Date: Thu, 1 May 2025 22:52:21 +0500
Subject: [PATCH 09/12] Integrated about us page

---
 src/app/about/page.tsx                        | 18 +++-
 src/app/api-utlities/@types/about-us.ts       |  8 ++
 src/app/api-utlities/@types/index.ts          | 25 ++++++
 src/app/api-utlities/@types/main.ts           | 12 +--
 src/app/api-utlities/presenters/index.ts      |  9 ++
 .../requests/about-us-page.request.ts         |  9 +-
 src/app/api-utlities/requests/common.ts       | 55 ++++++++++++
 src/app/api/pages/about-us/route.ts           |  4 +
 src/app/page.tsx                              | 25 +++---
 src/features/pages/api/pages.api.ts           | 19 +++++
 src/pages-templates/about/index.tsx           | 84 +++++++++++--------
 src/widgets/about-page/company-timeline.tsx   | 63 ++------------
 src/widgets/about-page/station-gallery.tsx    | 58 +++----------
 13 files changed, 228 insertions(+), 161 deletions(-)
 create mode 100644 src/app/api-utlities/@types/about-us.ts
 create mode 100644 src/features/pages/api/pages.api.ts

diff --git a/src/app/about/page.tsx b/src/app/about/page.tsx
index 418c7de..7b72902 100644
--- a/src/app/about/page.tsx
+++ b/src/app/about/page.tsx
@@ -1,5 +1,17 @@
-import AboutPage from "@/pages-templates/about";
+import AboutPage from '@/pages-templates/about';
 
-export default function About(){
-  return <AboutPage/>
+import { mainPageApi } from '@/features/pages/api/pages.api';
+
+import { makeStore } from '@/shared/store';
+
+export default async function About() {
+  const store = makeStore();
+
+  const { data, isLoading } = await store.dispatch(
+    mainPageApi.endpoints.fetchAboutUsPageContent.initiate(),
+  );
+
+  if (isLoading || !data) return null;
+
+  return <AboutPage content={data} />;
 }
diff --git a/src/app/api-utlities/@types/about-us.ts b/src/app/api-utlities/@types/about-us.ts
new file mode 100644
index 0000000..8d5ea67
--- /dev/null
+++ b/src/app/api-utlities/@types/about-us.ts
@@ -0,0 +1,8 @@
+import { HistoryItems, Reviews, Stations, TeamMembers } from '.';
+
+export type AboutUsPageData = {
+  team: TeamMembers;
+  history: HistoryItems;
+  stations: Stations;
+  reviews: Reviews;
+};
diff --git a/src/app/api-utlities/@types/index.ts b/src/app/api-utlities/@types/index.ts
index 09f3862..8be73a6 100644
--- a/src/app/api-utlities/@types/index.ts
+++ b/src/app/api-utlities/@types/index.ts
@@ -1,3 +1,13 @@
+import {
+  presentDiscounts,
+  presentHistoryItems,
+  presentJobs,
+  presentPartners,
+  presentReviews,
+  presentStations,
+  presentTeamMembers,
+} from '../presenters';
+
 export type Root<T> = { records: T[] };
 
 export interface Image {
@@ -65,3 +75,18 @@ export type History = Root<{
   _god: string;
   _opisanie: string;
 }>;
+
+export type Review = Root<{
+  id: number;
+  _name: string;
+  _otzyv: string;
+  _rejting: number;
+}>;
+
+export type TeamMembers = ReturnType<typeof presentTeamMembers>;
+export type HistoryItems = ReturnType<typeof presentHistoryItems>;
+export type Stations = ReturnType<typeof presentStations>;
+export type Partners = ReturnType<typeof presentPartners>;
+export type Jobs = ReturnType<typeof presentJobs>;
+export type Discounts = ReturnType<typeof presentDiscounts>;
+export type Reviews = ReturnType<typeof presentReviews>;
diff --git a/src/app/api-utlities/@types/main.ts b/src/app/api-utlities/@types/main.ts
index 881fcc3..e128c92 100644
--- a/src/app/api-utlities/@types/main.ts
+++ b/src/app/api-utlities/@types/main.ts
@@ -1,14 +1,4 @@
-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>;
+import { Discounts, Jobs, Partners, Stations } from '.';
 
 export type MainPageData = {
   discounts: Discounts;
diff --git a/src/app/api-utlities/presenters/index.ts b/src/app/api-utlities/presenters/index.ts
index 0054675..c13e57a 100644
--- a/src/app/api-utlities/presenters/index.ts
+++ b/src/app/api-utlities/presenters/index.ts
@@ -6,6 +6,7 @@ import {
   Image,
   Job,
   Partner,
+  Review,
   Select,
   Station,
   Team,
@@ -83,3 +84,11 @@ export const presentTexts = (texts: TextResponse) =>
     key: item._name,
     value: item._znachenie,
   }));
+
+export const presentReviews = (reviews: Review) =>
+  reviews.records.map((review) => ({
+    id: review.id,
+    fullname: review._name,
+    review: review._otzyv,
+    rating: review._rejting,
+  }));
diff --git a/src/app/api-utlities/requests/about-us-page.request.ts b/src/app/api-utlities/requests/about-us-page.request.ts
index 2504158..ee16f00 100644
--- a/src/app/api-utlities/requests/about-us-page.request.ts
+++ b/src/app/api-utlities/requests/about-us-page.request.ts
@@ -1,6 +1,13 @@
-import { historyRequest, teamRequest } from './common';
+import {
+  historyRequest,
+  reviewsRequest,
+  stationsWithImageRequest,
+  teamRequest,
+} from './common';
 
 export const aboutUsPageRequest = {
   ...teamRequest,
   ...historyRequest,
+  ...stationsWithImageRequest,
+  ...reviewsRequest,
 };
diff --git a/src/app/api-utlities/requests/common.ts b/src/app/api-utlities/requests/common.ts
index 30d6abd..3d4ab14 100644
--- a/src/app/api-utlities/requests/common.ts
+++ b/src/app/api-utlities/requests/common.ts
@@ -1,3 +1,5 @@
+import { EnumType } from 'json-to-graphql-query';
+
 export const stationsRequest = {
   _azs: {
     records: {
@@ -27,6 +29,48 @@ export const stationsRequest = {
   },
 };
 
+export const stationsWithImageRequest = {
+  _azs: {
+    __args: {
+      filtersSet: {
+        conjunction: new EnumType('and'),
+        filtersSet: [
+          {
+            field: new EnumType('_foto'),
+            operator: 'isNotEmpty',
+            value: [],
+          },
+        ],
+      },
+    },
+
+    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: {
@@ -98,3 +142,14 @@ export const historyRequest = {
     },
   },
 };
+
+export const reviewsRequest = {
+  _otzyvy: {
+    records: {
+      id: true,
+      _name: true,
+      _otzyv: true,
+      _rejting: true,
+    },
+  },
+};
diff --git a/src/app/api/pages/about-us/route.ts b/src/app/api/pages/about-us/route.ts
index fbba11c..31363d9 100644
--- a/src/app/api/pages/about-us/route.ts
+++ b/src/app/api/pages/about-us/route.ts
@@ -1,5 +1,7 @@
 import {
   presentHistoryItems,
+  presentReviews,
+  presentStations,
   presentTeamMembers,
 } from '@/app/api-utlities/presenters';
 import { aboutUsPageRequest } from '@/app/api-utlities/requests/about-us-page.request';
@@ -14,6 +16,8 @@ const routeHandler = async () => {
     JSON.stringify({
       team: presentTeamMembers(response.data._komanda),
       history: presentHistoryItems(response.data._istoriya),
+      stations: presentStations(response.data._azs),
+      reviews: presentReviews(response.data._otzyvy),
     }),
     {
       headers: { 'Content-Type': 'application/json' },
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 9322edb..e66b1f8 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,3 +1,7 @@
+import { mainPageApi } from '@/features/pages/api/pages.api';
+
+import { makeStore } from '@/shared/store';
+
 import { AboutSection } from '@/widgets/about-section';
 import { CharitySection } from '@/widgets/charity-section';
 import { CtaSection } from '@/widgets/cta-section';
@@ -8,23 +12,24 @@ import { PromotionsSection } from '@/widgets/promotions-section';
 import { StatsSection } from '@/widgets/stats-section';
 import { VacanciesSection } from '@/widgets/vacancies-section';
 
-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;
+  const store = makeStore();
+
+  const { data, isLoading } = await store.dispatch(
+    mainPageApi.endpoints.fetchMainPageContent.initiate(),
+  );
+
+  if (isLoading || !data) return null;
 
   return (
     <main>
       <HeroSection />
       <StatsSection />
-      <MapSection stations={mainPageData.stations} />
+      <MapSection stations={data.stations} />
       <AboutSection />
-      <PromotionsSection discounts={mainPageData.discounts} />
-      <VacanciesSection jobs={mainPageData.jobs} />
-      <PartnersSection partners={mainPageData.partners} />
+      <PromotionsSection discounts={data.discounts} />
+      <VacanciesSection jobs={data.jobs} />
+      <PartnersSection partners={data.partners} />
       <CharitySection />
       <CtaSection />
     </main>
diff --git a/src/features/pages/api/pages.api.ts b/src/features/pages/api/pages.api.ts
new file mode 100644
index 0000000..e0f4d45
--- /dev/null
+++ b/src/features/pages/api/pages.api.ts
@@ -0,0 +1,19 @@
+import { AboutUsPageData } from '@/app/api-utlities/@types/about-us';
+import { MainPageData } from '@/app/api-utlities/@types/main';
+
+import { baseAPI } from '@/shared/api/base-api';
+
+export const mainPageApi = baseAPI.injectEndpoints({
+  endpoints: (builder) => ({
+    fetchMainPageContent: builder.query<MainPageData, void>({
+      query: () => '/pages/main',
+    }),
+
+    fetchAboutUsPageContent: builder.query<AboutUsPageData, void>({
+      query: () => '/pages/about-us',
+    }),
+  }),
+});
+
+export const { useFetchMainPageContentQuery, useFetchAboutUsPageContentQuery } =
+  mainPageApi;
diff --git a/src/pages-templates/about/index.tsx b/src/pages-templates/about/index.tsx
index 0990226..728f78c 100644
--- a/src/pages-templates/about/index.tsx
+++ b/src/pages-templates/about/index.tsx
@@ -3,24 +3,28 @@
 import { Fuel, History, MapPin, Star, Target, Users } from 'lucide-react';
 import Image from 'next/image';
 
-// import { useTranslation } from 'next-i18next';
+import { AboutUsPageData } from '@/app/api-utlities/@types/about-us';
 
 import AnimatedCounter from '@/shared/components/animated-counter';
 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';
 
 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',
   description: 'about.metadata.description',
 };
 
-export default function AboutPage() {
+export interface AboutPageProps {
+  content: AboutUsPageData;
+}
+
+export default function AboutPage({ content }: AboutPageProps) {
   const { t } = useTextController();
 
   return (
@@ -38,7 +42,11 @@ export default function AboutPage() {
               priority
             />
             <div className='absolute inset-0 flex items-center bg-gradient-to-r from-black/70 to-black/30 px-2'>
-              <div data-aos='fade-down' data-aos-duration="1000" className='container mx-auto'>
+              <div
+                data-aos='fade-down'
+                data-aos-duration='1000'
+                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('about.hero.title')}
@@ -53,7 +61,7 @@ export default function AboutPage() {
         </section>
 
         {/* Company Overview */}
-        <Container>    
+        <Container>
           <section className='py-16'>
             <div className='container mx-auto'>
               <div className='grid items-center gap-12 md:grid-cols-2'>
@@ -74,7 +82,7 @@ export default function AboutPage() {
                     {t('about.overview.description3')}
                   </p>
 
-                  <div className='mb-6 grid md:grid-cols-2 gap-4 grid-cols-1'>
+                  <div className='mb-6 grid grid-cols-1 gap-4 md:grid-cols-2'>
                     {[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'>
@@ -92,7 +100,10 @@ export default function AboutPage() {
                     ))}
                   </div>
                 </div>
-                <div data-aos="zoom-out-right" className='relative h-[500px] overflow-hidden rounded-xl shadow-xl'>
+                <div
+                  data-aos='zoom-out-right'
+                  className='relative h-[500px] overflow-hidden rounded-xl shadow-xl'
+                >
                   <Image
                     src='/placeholder.svg?height=500&width=600&text=Главный+офис'
                     alt={t('about.overview.imageAlt')}
@@ -116,7 +127,7 @@ export default function AboutPage() {
                 {t('about.stats.subtitle')}
               </p>
             </div>
-            <div className='grid grid-cols-1 sm:grid-cols-2 gap-8 text-center md:grid-cols-4'>
+            <div className='grid grid-cols-1 gap-8 text-center sm:grid-cols-2 md:grid-cols-4'>
               {[0, 1, 2, 3].map((index) => (
                 <div key={index} className='space-y-2'>
                   <h3 className='text-4xl font-bold'>
@@ -157,9 +168,8 @@ export default function AboutPage() {
             </Container>
 
             <Container>
-              <CompanyTimeline />
+              <CompanyTimeline timeline={content.history} />
             </Container>
-
           </div>
         </section>
 
@@ -179,7 +189,7 @@ export default function AboutPage() {
                 </p>
               </div>
 
-              <StationGallery />
+              <StationGallery stations={content.stations} />
 
               <div className='mt-12 text-center'>
                 <p className='mx-auto mb-6 max-w-2xl text-gray-600'>
@@ -210,7 +220,11 @@ export default function AboutPage() {
                 </p>
               </div>
 
-              <div data-aos='flip-up' data-aos-duration='600' className='grid gap-8 md:grid-cols-3'>
+              <div
+                data-aos='flip-up'
+                data-aos-duration='600'
+                className='grid gap-8 md:grid-cols-3'
+              >
                 {[0, 1, 2].map((index) => (
                   <Card
                     key={index}
@@ -250,27 +264,29 @@ export default function AboutPage() {
                 </p>
               </div>
 
-              <div data-aos='flip-down' data-aos-duration='600' className='grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-4'>
-                {[0, 1, 2, 3].map((index) => (
+              <div
+                data-aos='flip-down'
+                data-aos-duration='600'
+                className='grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-4'
+              >
+                {content.team.map((member, 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'
-                      />
+                      {member.photo && (
+                        <Image
+                          src={member.photo}
+                          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>
+                      <h3 className='text-lg font-bold'>{member.name}</h3>
+                      <p className='text-gray-600'>{member.profession}</p>
                     </div>
                   </div>
                 ))}
@@ -281,7 +297,6 @@ export default function AboutPage() {
 
         {/* Testimonials */}
         <Container>
-
           <section className='py-16'>
             <div className='container mx-auto'>
               <div className='mb-12 flex flex-col items-center justify-center text-center'>
@@ -296,8 +311,11 @@ export default function AboutPage() {
                 </p>
               </div>
 
-              <div data-aos="zoom-out-right" className='grid gap-8 md:grid-cols-3'>
-                {[0, 1, 2].map((index) => (
+              <div
+                data-aos='zoom-out-right'
+                className='grid gap-8 md:grid-cols-3'
+              >
+                {content.reviews.map((review, index) => (
                   <Card
                     key={index}
                     className='overflow-hidden transition-all hover:shadow-lg'
@@ -309,16 +327,14 @@ export default function AboutPage() {
                           .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'}`}
+                              className={`h-5 w-5 ${i < Number(review.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`)}
+                        "{review.review}"
                       </p>
+                      <p className='font-semibold'>{review.fullname}</p>
                     </CardContent>
                   </Card>
                 ))}
diff --git a/src/widgets/about-page/company-timeline.tsx b/src/widgets/about-page/company-timeline.tsx
index ea6e15d..3142061 100644
--- a/src/widgets/about-page/company-timeline.tsx
+++ b/src/widgets/about-page/company-timeline.tsx
@@ -3,64 +3,19 @@
 import { Calendar, ChevronDown, ChevronUp } from 'lucide-react';
 import { useState } from 'react';
 
+import { HistoryItems } from '@/app/api-utlities/@types/about-us';
+
 import { useTextController } from '@/shared/language/hooks/use-text-controller';
 import { Button } from '@/shared/shadcn-ui/button';
 import { Card, CardContent } from '@/shared/shadcn-ui/card';
 
-const timelineEvents = [
-  {
-    year: '2008',
-    title: 'Основание компании',
-    description:
-      'GasNetwork была основана с открытием первых трех заправочных станций в Душанбе. С самого начала компания поставила перед собой цель предоставлять качественное топливо и отличный сервис.',
-  },
-  {
-    year: '2010',
-    title: 'Расширение сети',
-    description:
-      'Открытие еще пяти заправочных станций в различных регионах Таджикистана. Начало формирования единого стандарта обслуживания на всех станциях сети.',
-  },
-  {
-    year: '2012',
-    title: 'Внедрение программы лояльности',
-    description:
-      'Запуск первой в Таджикистане программы лояльности для клиентов сети заправок. Введение карт постоянного клиента с накопительной системой бонусов.',
-  },
-  {
-    year: '2014',
-    title: 'Модернизация оборудования',
-    description:
-      'Масштабная программа по обновлению оборудования на всех заправочных станциях сети. Внедрение современных технологий для повышения качества обслуживания.',
-  },
-  {
-    year: '2016',
-    title: 'Открытие 15-й заправки',
-    description:
-      'Значительное расширение сети с открытием юбилейной 15-й заправочной станции. GasNetwork становится одной из крупнейших сетей заправок в Таджикистане.',
-  },
-  {
-    year: '2018',
-    title: 'Запуск мобильного приложения',
-    description:
-      'Разработка и запуск мобильного приложения для клиентов сети. Возможность отслеживать бонусы, находить ближайшие заправки и получать специальные предложения.',
-  },
-  {
-    year: '2020',
-    title: 'Создание благотворительного фонда',
-    description:
-      'Основание благотворительного фонда GasNetwork для поддержки социальных проектов в Таджикистане. Начало активной социальной деятельности компании.',
-  },
-  {
-    year: '2023',
-    title: 'Современное развитие',
-    description:
-      'Сегодня GasNetwork - это 25+ современных заправочных станций по всему Таджикистану, более 150 сотрудников и тысячи довольных клиентов ежедневно.',
-  },
-];
+export interface CompanyTimelineProps {
+  timeline: HistoryItems;
+}
 
-export function CompanyTimeline() {
+export function CompanyTimeline({ timeline }: CompanyTimelineProps) {
   const [expanded, setExpanded] = useState(false);
-  const displayEvents = expanded ? timelineEvents : timelineEvents.slice(0, 4);
+  const displayEvents = expanded ? timeline : timeline.slice(0, 4);
 
   const { t } = useTextController();
 
@@ -80,7 +35,7 @@ export function CompanyTimeline() {
                   <Calendar className='size-5 text-red-600' />
                 </div>
                 <h3 className='text-xl font-bold'>{event.year}</h3>
-                <h4 className='mb-2 text-lg font-semibold'>{event.title}</h4>
+                <h4 className='mb-2 text-lg font-semibold'>{event.name}</h4>
               </div>
 
               <div
@@ -108,7 +63,7 @@ export function CompanyTimeline() {
         ))}
       </div>
 
-      {timelineEvents.length > 4 && (
+      {timeline.length > 4 && (
         <div className='mt-8 text-center'>
           <Button
             variant='outline'
diff --git a/src/widgets/about-page/station-gallery.tsx b/src/widgets/about-page/station-gallery.tsx
index c47b752..9407c48 100644
--- a/src/widgets/about-page/station-gallery.tsx
+++ b/src/widgets/about-page/station-gallery.tsx
@@ -4,6 +4,8 @@ import { ChevronLeft, ChevronRight, Maximize } from 'lucide-react';
 import Image from 'next/image';
 import { useState } from 'react';
 
+import { Stations } from '@/app/api-utlities/@types';
+
 import { useTextController } from '@/shared/language/hooks/use-text-controller';
 import { Button } from '@/shared/shadcn-ui/button';
 import {
@@ -15,55 +17,15 @@ import {
   DialogTrigger,
 } from '@/shared/shadcn-ui/dialog';
 
-interface Station {
-  id: number;
-  name: string;
-  image: string;
-  location: string;
+export interface StationGalleryProps {
+  stations: Stations;
 }
 
-const stations: Array<Station> = [
-  {
-    id: 1,
-    name: 'АЗС Душанбе-Центр',
-    image: '/placeholder.svg?height=400&width=600&text=АЗС+Душанбе-Центр',
-    location: 'ул. Рудаки 150, Душанбе',
-  },
-  {
-    id: 2,
-    name: 'АЗС Худжанд',
-    image: '/placeholder.svg?height=400&width=600&text=АЗС+Худжанд',
-    location: 'ул. Ленина 45, Худжанд',
-  },
-  {
-    id: 3,
-    name: 'АЗС Куляб',
-    image: '/placeholder.svg?height=400&width=600&text=АЗС+Куляб',
-    location: 'ул. Сомони 78, Куляб',
-  },
-  {
-    id: 4,
-    name: 'АЗС Бохтар',
-    image: '/placeholder.svg?height=400&width=600&text=АЗС+Бохтар',
-    location: 'ул. Айни 23, Бохтар',
-  },
-  {
-    id: 5,
-    name: 'АЗС Хорог',
-    image: '/placeholder.svg?height=400&width=600&text=АЗС+Хорог',
-    location: 'ул. Горная 12, Хорог',
-  },
-  {
-    id: 6,
-    name: 'АЗС Истаравшан',
-    image: '/placeholder.svg?height=400&width=600&text=АЗС+Истаравшан',
-    location: 'ул. Исмоили Сомони 34, Истаравшан',
-  },
-];
-
-export function StationGallery() {
+export function StationGallery({ stations }: StationGalleryProps) {
   const [currentImage, setCurrentImage] = useState(0);
-  const [selectedStation, setSelectedStation] = useState<Station | null>(null);
+  const [selectedStation, setSelectedStation] = useState<Stations[0] | null>(
+    null,
+  );
 
   const nextImage = () => {
     setCurrentImage((prev) => (prev === stations.length - 1 ? 0 : prev + 1));
@@ -86,7 +48,7 @@ export function StationGallery() {
         />
         <div className='absolute inset-0 flex flex-col justify-end bg-gradient-to-t from-black/70 to-transparent p-6 text-white'>
           <h3 className='text-2xl font-bold'>{stations[currentImage].name}</h3>
-          <p className='text-white/80'>{stations[currentImage].location}</p>
+          <p className='text-white/80'>{stations[currentImage].address}</p>
         </div>
 
         <Button
@@ -125,7 +87,7 @@ export function StationGallery() {
             <DialogHeader>
               <DialogTitle>{stations[currentImage].name}</DialogTitle>
               <DialogDescription>
-                {stations[currentImage].location}
+                {stations[currentImage].address}
               </DialogDescription>
             </DialogHeader>
             <div className='relative h-[60vh] w-full'>

From 6deb48239e55b825dfd505772a87899bc365774b Mon Sep 17 00:00:00 2001
From: Umar Adilov <99314948+adilovcode@users.noreply.github.com>
Date: Thu, 1 May 2025 23:25:37 +0500
Subject: [PATCH 10/12] Fixed issue with SSR

---
 src/app/about/page.tsx                        |   4 +-
 src/app/api/bonus/info/route.ts               |   2 +-
 .../middlewares/error-handler.middleware.ts   |   4 +-
 src/app/api/pages/about-us/route.ts           |  28 ---
 src/app/api/pages/main/route.ts               |  28 ---
 src/app/api/text/route.ts                     |  14 --
 src/app/layout.tsx                            |   2 +-
 src/app/page.tsx                              |   2 +-
 src/features/map/ui/gas-station-map.tsx       |   2 +-
 src/features/pages/api/pages.api.ts           |  56 +++++-
 src/pages-templates/login/index.tsx           | 171 ++++++++++--------
 src/shared/api/taylor-api.ts                  |  14 ++
 src/shared/components/promotion-slider.tsx    |   2 +-
 src/shared/language/api/text-control.api.ts   |  23 ++-
 src/shared/store/root-reducer.ts              |   3 +
 src/widgets/about-page/company-timeline.tsx   |   2 +-
 src/widgets/map-section.tsx                   |   3 +-
 src/widgets/partners-section.tsx              |   2 +-
 src/widgets/promotions-section.tsx            |   2 +-
 src/widgets/vacancies-section.tsx             |   2 +-
 20 files changed, 189 insertions(+), 177 deletions(-)
 delete mode 100644 src/app/api/pages/about-us/route.ts
 delete mode 100644 src/app/api/pages/main/route.ts
 delete mode 100644 src/app/api/text/route.ts
 create mode 100644 src/shared/api/taylor-api.ts

diff --git a/src/app/about/page.tsx b/src/app/about/page.tsx
index 7b72902..778e5c7 100644
--- a/src/app/about/page.tsx
+++ b/src/app/about/page.tsx
@@ -7,11 +7,11 @@ import { makeStore } from '@/shared/store';
 export default async function About() {
   const store = makeStore();
 
-  const { data, isLoading } = await store.dispatch(
+  const { data } = await store.dispatch(
     mainPageApi.endpoints.fetchAboutUsPageContent.initiate(),
   );
 
-  if (isLoading || !data) return null;
+  if (!data) return null;
 
   return <AboutPage content={data} />;
 }
diff --git a/src/app/api/bonus/info/route.ts b/src/app/api/bonus/info/route.ts
index efb8011..d7a8178 100644
--- a/src/app/api/bonus/info/route.ts
+++ b/src/app/api/bonus/info/route.ts
@@ -4,7 +4,7 @@ import oriyoClient from '@/app/api-utlities/utilities/oriyo.client';
 
 import { validationErrorHandler } from '../../middlewares/error-handler.middleware';
 
-export const routeHandler = async (req: NextRequest) => {
+const routeHandler = async (req: NextRequest) => {
   const bonusTokenData = req.cookies.get('bonus__token');
 
   if (!bonusTokenData) {
diff --git a/src/app/api/middlewares/error-handler.middleware.ts b/src/app/api/middlewares/error-handler.middleware.ts
index a3046e8..cc02041 100644
--- a/src/app/api/middlewares/error-handler.middleware.ts
+++ b/src/app/api/middlewares/error-handler.middleware.ts
@@ -2,9 +2,9 @@ import { NextRequest, NextResponse } from 'next/server';
 import { ZodError } from 'zod';
 
 export const validationErrorHandler =
-  (handler: Function) => async (req: NextRequest, res: NextResponse) => {
+  (handler: Function) => async (req: NextRequest) => {
     try {
-      return await handler(req, res);
+      return await handler(req);
     } catch (error) {
       if (error instanceof ZodError)
         return NextResponse.json({ message: error.format() }, { status: 400 });
diff --git a/src/app/api/pages/about-us/route.ts b/src/app/api/pages/about-us/route.ts
deleted file mode 100644
index 31363d9..0000000
--- a/src/app/api/pages/about-us/route.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import {
-  presentHistoryItems,
-  presentReviews,
-  presentStations,
-  presentTeamMembers,
-} from '@/app/api-utlities/presenters';
-import { aboutUsPageRequest } from '@/app/api-utlities/requests/about-us-page.request';
-import { requestTaylor } from '@/app/api-utlities/utilities/taylor.client';
-
-import { validationErrorHandler } from '../../middlewares/error-handler.middleware';
-
-const routeHandler = async () => {
-  const response = await requestTaylor(aboutUsPageRequest);
-
-  return new Response(
-    JSON.stringify({
-      team: presentTeamMembers(response.data._komanda),
-      history: presentHistoryItems(response.data._istoriya),
-      stations: presentStations(response.data._azs),
-      reviews: presentReviews(response.data._otzyvy),
-    }),
-    {
-      headers: { 'Content-Type': 'application/json' },
-    },
-  );
-};
-
-export const GET = validationErrorHandler(routeHandler);
diff --git a/src/app/api/pages/main/route.ts b/src/app/api/pages/main/route.ts
deleted file mode 100644
index deb8f1b..0000000
--- a/src/app/api/pages/main/route.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-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);
diff --git a/src/app/api/text/route.ts b/src/app/api/text/route.ts
deleted file mode 100644
index a5bf3df..0000000
--- a/src/app/api/text/route.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-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' },
-    },
-  );
-}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 6406af6..a195aa5 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -37,7 +37,7 @@ export default async function RootLayout({
       className='scroll-smooth'
       style={{ scrollBehavior: 'smooth' }}
     >
-      <body className={`${inter.className} antialiased min-w-2xs`}>
+      <body className={`${inter.className} min-w-2xs antialiased`}>
         <Providers textItems={response.data as TextItem[]}>
           <Header />
           {children}
diff --git a/src/app/page.tsx b/src/app/page.tsx
index e66b1f8..a340dee 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -15,7 +15,7 @@ import { VacanciesSection } from '@/widgets/vacancies-section';
 export default async function Home() {
   const store = makeStore();
 
-  const { data, isLoading } = await store.dispatch(
+  const { data, isLoading, error } = await store.dispatch(
     mainPageApi.endpoints.fetchMainPageContent.initiate(),
   );
 
diff --git a/src/features/map/ui/gas-station-map.tsx b/src/features/map/ui/gas-station-map.tsx
index 76ce169..5f1357e 100644
--- a/src/features/map/ui/gas-station-map.tsx
+++ b/src/features/map/ui/gas-station-map.tsx
@@ -10,7 +10,7 @@ import {
 } from 'lucide-react';
 import { useEffect, useRef, useState } from 'react';
 
-import { Stations } from '@/app/api-utlities/@types/main';
+import { Stations } from '@/app/api-utlities/@types';
 
 import { useTextController } from '@/shared/language/hooks/use-text-controller';
 import { Badge } from '@/shared/shadcn-ui/badge';
diff --git a/src/features/pages/api/pages.api.ts b/src/features/pages/api/pages.api.ts
index e0f4d45..6909d11 100644
--- a/src/features/pages/api/pages.api.ts
+++ b/src/features/pages/api/pages.api.ts
@@ -1,19 +1,59 @@
+import { jsonToGraphQLQuery } from 'json-to-graphql-query';
+
 import { AboutUsPageData } from '@/app/api-utlities/@types/about-us';
 import { MainPageData } from '@/app/api-utlities/@types/main';
+import {
+  presentDiscounts,
+  presentHistoryItems,
+  presentJobs,
+  presentPartners,
+  presentReviews,
+  presentStations,
+  presentTeamMembers,
+} from '@/app/api-utlities/presenters';
+import { aboutUsPageRequest } from '@/app/api-utlities/requests/about-us-page.request';
+import { mainPageRequest } from '@/app/api-utlities/requests/main-page.request';
 
-import { baseAPI } from '@/shared/api/base-api';
+import { taylorAPI } from '@/shared/api/taylor-api';
 
-export const mainPageApi = baseAPI.injectEndpoints({
+export const mainPageApi = taylorAPI.injectEndpoints({
   endpoints: (builder) => ({
     fetchMainPageContent: builder.query<MainPageData, void>({
-      query: () => '/pages/main',
+      query: () => ({
+        url: '',
+        method: 'POST',
+        body: {
+          query: jsonToGraphQLQuery({ query: mainPageRequest }),
+        },
+      }),
+
+      transformResponse: (response: any) => {
+        return {
+          partners: presentPartners(response.data._partners),
+          jobs: presentJobs(response.data._vacancies),
+          discounts: presentDiscounts(response.data._akcii),
+          stations: presentStations(response.data._azs),
+        };
+      },
     }),
 
-    fetchAboutUsPageContent: builder.query<AboutUsPageData, void>({
-      query: () => '/pages/about-us',
+    fetchAboutUsPageContent: builder.mutation<AboutUsPageData, void>({
+      query: () => ({
+        url: '',
+        method: 'POST',
+        body: {
+          query: jsonToGraphQLQuery({ query: aboutUsPageRequest }),
+        },
+      }),
+
+      transformResponse: (response: any) => {
+        return {
+          team: presentTeamMembers(response.data._komanda),
+          history: presentHistoryItems(response.data._istoriya),
+          stations: presentStations(response.data._azs),
+          reviews: presentReviews(response.data._otzyvy),
+        };
+      },
     }),
   }),
 });
-
-export const { useFetchMainPageContentQuery, useFetchAboutUsPageContentQuery } =
-  mainPageApi;
diff --git a/src/pages-templates/login/index.tsx b/src/pages-templates/login/index.tsx
index ac51ec6..40c4bb1 100644
--- a/src/pages-templates/login/index.tsx
+++ b/src/pages-templates/login/index.tsx
@@ -4,6 +4,7 @@ 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 { Suspense } from 'react';
 
 import { LoginForm } from '@/features/auth/login-form';
 
@@ -16,13 +17,13 @@ import {
   CardHeader,
   CardTitle,
 } from '@/shared/shadcn-ui/card';
+import Container from '@/shared/shadcn-ui/conteiner';
 import {
   Tabs,
   TabsContent,
   TabsList,
   TabsTrigger,
 } from '@/shared/shadcn-ui/tabs';
-import Container from '@/shared/shadcn-ui/conteiner';
 
 const tabs = [
   {
@@ -41,16 +42,97 @@ const tabs = [
   },
 ];
 
-export default function LoginPage() {
+function LoginPageTabs() {
   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 });
+    router.push(`?tab=${tabType}`, undefined);
   };
 
+  return (
+    <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>
+
+      {tabs.map((tab) => {
+        const tabCookieName = `${tab.type}__token`;
+
+        const authenticationCookie = getCookie(tabCookieName);
+
+        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>
+  );
+}
+
+export default function LoginPage() {
+  const { t } = useTextController();
+
   return (
     <Container>
       <div className='flex min-h-screen flex-col items-center justify-center'>
@@ -67,86 +149,17 @@ export default function LoginPage() {
             </div>
 
             <div data-aos='zoom-in' 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>
-
-                {tabs.map((tab) => {
-                  const tabCookieName = `${tab.type}__token`;
-
-                  const authenticationCookie = getCookie(tabCookieName);
-
-                  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>
+              <Suspense>
+                <LoginPageTabs />
+              </Suspense>
 
               <div className='mt-8 text-center text-sm text-gray-500'>
                 <p>
                   {t('auth.loginIssues')}{' '}
-                  <Link href='/contact' className='text-red-600 hover:underline'>
+                  <Link
+                    href='/contact'
+                    className='text-red-600 hover:underline'
+                  >
                     {t('auth.contactLink')}
                   </Link>
                 </p>
diff --git a/src/shared/api/taylor-api.ts b/src/shared/api/taylor-api.ts
new file mode 100644
index 0000000..200a98c
--- /dev/null
+++ b/src/shared/api/taylor-api.ts
@@ -0,0 +1,14 @@
+import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query';
+
+const baseQuery = fetchBaseQuery({
+  baseUrl: process.env.TAYLOR_API_ENDPOINT,
+  headers: {
+    Authorization: process.env.TAYLOR_API_TOKEN || '',
+  },
+});
+
+export const taylorAPI = createApi({
+  reducerPath: 'taylorAPI',
+  baseQuery,
+  endpoints: () => ({}),
+});
diff --git a/src/shared/components/promotion-slider.tsx b/src/shared/components/promotion-slider.tsx
index fabe4be..06a75f7 100644
--- a/src/shared/components/promotion-slider.tsx
+++ b/src/shared/components/promotion-slider.tsx
@@ -5,7 +5,7 @@ import Image from 'next/image';
 import Link from 'next/link';
 import { useEffect, useState } from 'react';
 
-import { Discounts } from '@/app/api-utlities/@types/main';
+import { Discounts } from '@/app/api-utlities/@types';
 
 import { useTextController } from '@/shared/language/hooks/use-text-controller';
 import { Button } from '@/shared/shadcn-ui/button';
diff --git a/src/shared/language/api/text-control.api.ts b/src/shared/language/api/text-control.api.ts
index 1fe2b26..dcbce86 100644
--- a/src/shared/language/api/text-control.api.ts
+++ b/src/shared/language/api/text-control.api.ts
@@ -1,12 +1,25 @@
-import { baseAPI } from '@/shared/api/base-api';
+import { jsonToGraphQLQuery } from 'json-to-graphql-query';
+
+import { presentTexts } from '@/app/api-utlities/presenters';
+import { textsRequest } from '@/app/api-utlities/requests/common';
+
+import { taylorAPI } from '@/shared/api/taylor-api';
 import { TextItem } from '@/shared/types/text.types';
 
-export const textControlApi = baseAPI.injectEndpoints({
+export const textControlApi = taylorAPI.injectEndpoints({
   endpoints: (builder) => ({
     fetchText: builder.query<TextItem[], void>({
-      query: () => '/text',
+      query: () => ({
+        url: '',
+        method: 'POST',
+        body: {
+          query: jsonToGraphQLQuery({ query: textsRequest }),
+        },
+      }),
+
+      transformResponse: (response: any) => {
+        return presentTexts(response.data._kontentSajta);
+      },
     }),
   }),
 });
-
-export const { useFetchTextQuery } = textControlApi;
diff --git a/src/shared/store/root-reducer.ts b/src/shared/store/root-reducer.ts
index 1b1a8cd..080aa28 100644
--- a/src/shared/store/root-reducer.ts
+++ b/src/shared/store/root-reducer.ts
@@ -2,6 +2,9 @@ import { combineReducers } from '@reduxjs/toolkit';
 
 import { baseAPI } from '@/shared/api/base-api';
 
+import { taylorAPI } from '../api/taylor-api';
+
 export const rootReducer = combineReducers({
   [baseAPI.reducerPath]: baseAPI.reducer,
+  [taylorAPI.reducerPath]: taylorAPI.reducer,
 });
diff --git a/src/widgets/about-page/company-timeline.tsx b/src/widgets/about-page/company-timeline.tsx
index 3142061..1dcf68b 100644
--- a/src/widgets/about-page/company-timeline.tsx
+++ b/src/widgets/about-page/company-timeline.tsx
@@ -3,7 +3,7 @@
 import { Calendar, ChevronDown, ChevronUp } from 'lucide-react';
 import { useState } from 'react';
 
-import { HistoryItems } from '@/app/api-utlities/@types/about-us';
+import { HistoryItems } from '@/app/api-utlities/@types';
 
 import { useTextController } from '@/shared/language/hooks/use-text-controller';
 import { Button } from '@/shared/shadcn-ui/button';
diff --git a/src/widgets/map-section.tsx b/src/widgets/map-section.tsx
index 8bfa798..dc4c187 100644
--- a/src/widgets/map-section.tsx
+++ b/src/widgets/map-section.tsx
@@ -2,9 +2,8 @@
 
 import { MapPin } from 'lucide-react';
 
-import { Stations } from '@/app/api-utlities/@types/main';
+import { Stations } from '@/app/api-utlities/@types';
 
-import { GasStationMap } from '@/features/map';
 import { Point } from '@/features/map/model';
 import { YandexMap } from '@/features/map/ui/yandex-map';
 
diff --git a/src/widgets/partners-section.tsx b/src/widgets/partners-section.tsx
index dd51fd9..e85119f 100644
--- a/src/widgets/partners-section.tsx
+++ b/src/widgets/partners-section.tsx
@@ -4,7 +4,7 @@ import { Handshake } from 'lucide-react';
 import Image from 'next/image';
 import Link from 'next/link';
 
-import { Partners } from '@/app/api-utlities/@types/main';
+import { Partners } from '@/app/api-utlities/@types';
 
 import { useTextController } from '@/shared/language/hooks/use-text-controller';
 import { Button } from '@/shared/shadcn-ui/button';
diff --git a/src/widgets/promotions-section.tsx b/src/widgets/promotions-section.tsx
index 39068b2..610b1ea 100644
--- a/src/widgets/promotions-section.tsx
+++ b/src/widgets/promotions-section.tsx
@@ -2,7 +2,7 @@
 
 import { Gift } from 'lucide-react';
 
-import { Discounts } from '@/app/api-utlities/@types/main';
+import { Discounts } from '@/app/api-utlities/@types';
 
 import PromotionSlider from '@/shared/components/promotion-slider';
 import { useTextController } from '@/shared/language/hooks/use-text-controller';
diff --git a/src/widgets/vacancies-section.tsx b/src/widgets/vacancies-section.tsx
index db81ee0..20cd737 100644
--- a/src/widgets/vacancies-section.tsx
+++ b/src/widgets/vacancies-section.tsx
@@ -2,7 +2,7 @@
 
 import { Briefcase } from 'lucide-react';
 
-import { Jobs } from '@/app/api-utlities/@types/main';
+import { Jobs } from '@/app/api-utlities/@types';
 
 import { useTextController } from '@/shared/language/hooks/use-text-controller';
 import { cn } from '@/shared/lib/utils';

From 891fb643399391a36ca5675169d82939af1cfe42 Mon Sep 17 00:00:00 2001
From: Umar Adilov <99314948+adilovcode@users.noreply.github.com>
Date: Thu, 1 May 2025 23:27:00 +0500
Subject: [PATCH 11/12] Added taylor api middleware

---
 src/shared/store/index.ts | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/shared/store/index.ts b/src/shared/store/index.ts
index fb9db85..599e8de 100644
--- a/src/shared/store/index.ts
+++ b/src/shared/store/index.ts
@@ -4,13 +4,16 @@ import { createWrapper } from 'next-redux-wrapper';
 
 import { baseAPI } from '@/shared/api/base-api';
 
+import { taylorAPI } from '../api/taylor-api';
 import { rootReducer } from './root-reducer';
 
 export const makeStore = () =>
   configureStore({
     reducer: rootReducer,
     middleware: (getDefaultMiddleware) =>
-      getDefaultMiddleware().concat(baseAPI.middleware),
+      getDefaultMiddleware()
+        .concat(baseAPI.middleware)
+        .concat(taylorAPI.middleware),
     devTools: process.env.NODE_ENV === 'development',
   });
 

From 93c4b75998ac720e9152003a1426a4a23fbe2a3b Mon Sep 17 00:00:00 2001
From: Umar Adilov <99314948+adilovcode@users.noreply.github.com>
Date: Fri, 2 May 2025 00:49:05 +0500
Subject: [PATCH 12/12] integrate transaction table

---
 src/app/api/auth/login/route.ts               |  16 +--
 src/app/api/bonus/transactions/route.ts       |  63 +++++++++
 src/app/api/corporate/info/route.ts           |  23 ++++
 .../middlewares/error-handler.middleware.ts   |   5 +-
 src/entities/bonus/api/bonus.api.ts           |  20 ++-
 .../model/types/bonus-client-info.type.ts     |  26 ++++
 src/entities/corporate/api/corporate.api.ts   |  17 +++
 .../model/types/corporate-client-info.type.ts |   9 ++
 .../(dashboard)/corporate-dashboard/index.tsx | 126 +++++++++++-------
 src/widgets/transactions-table.tsx            | 101 ++++----------
 10 files changed, 264 insertions(+), 142 deletions(-)
 create mode 100644 src/app/api/bonus/transactions/route.ts
 create mode 100644 src/app/api/corporate/info/route.ts
 create mode 100644 src/entities/corporate/api/corporate.api.ts
 create mode 100644 src/entities/corporate/model/types/corporate-client-info.type.ts

diff --git a/src/app/api/auth/login/route.ts b/src/app/api/auth/login/route.ts
index 7dbe591..8772735 100644
--- a/src/app/api/auth/login/route.ts
+++ b/src/app/api/auth/login/route.ts
@@ -23,22 +23,18 @@ const routeHandler = async (req: NextRequest) => {
       },
     });
 
-    const { token, card_id } = JSON.parse(oriyoResponse.data);
+    const parsedResponse = JSON.parse(oriyoResponse.data);
 
-    if (!token) {
+    if (!parsedResponse.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,
-      },
-    );
+    response.cookies.set(`${validatedBody.type}__token`, oriyoResponse.data, {
+      path: '/',
+      maxAge: 2 * 60 * 60,
+    });
 
     return response;
   } catch (error) {
diff --git a/src/app/api/bonus/transactions/route.ts b/src/app/api/bonus/transactions/route.ts
new file mode 100644
index 0000000..310e78a
--- /dev/null
+++ b/src/app/api/bonus/transactions/route.ts
@@ -0,0 +1,63 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { z } from 'zod';
+
+import oriyoClient from '@/app/api-utlities/utilities/oriyo.client';
+
+import { validationErrorHandler } from '../../middlewares/error-handler.middleware';
+
+const validatedSchema = z.object({
+  start_date: z.string().optional(),
+  end_date: z.string().optional(),
+  limit: z.coerce.number(),
+  page: z.coerce.number(),
+});
+
+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 params = Array.from(req.nextUrl.searchParams.entries()).reduce(
+    (pr, cr) => {
+      pr[cr[0]] = cr[1];
+
+      return pr;
+    },
+    {} as Record<string, string>,
+  );
+
+  const validatedRequest = validatedSchema.parse(params);
+
+  const { card_id, token } = JSON.parse(bonusTokenData.value);
+
+  const oriyoResponse = await oriyoClient.get('/client/transactions', {
+    params: {
+      card_id,
+      token,
+      limit: validatedRequest.limit,
+      page: validatedRequest.page,
+      type: 'bonus',
+      sort: 'id',
+      direction: 'desc',
+      start_date: validatedRequest.start_date,
+      end_date: validatedRequest.end_date,
+    },
+  });
+
+  const parsedResponse = JSON.parse(oriyoResponse.data);
+
+  if (parsedResponse.error) {
+    return NextResponse.json({ message: 'Fetch error' }, { status: 400 });
+  }
+
+  return new Response(oriyoResponse.data, {
+    headers: { 'Content-Type': 'application/json' },
+  });
+};
+
+export const GET = validationErrorHandler(routeHandler);
diff --git a/src/app/api/corporate/info/route.ts b/src/app/api/corporate/info/route.ts
new file mode 100644
index 0000000..b7e23ff
--- /dev/null
+++ b/src/app/api/corporate/info/route.ts
@@ -0,0 +1,23 @@
+import { omit } from 'lodash';
+import { NextRequest, NextResponse } from 'next/server';
+
+import { validationErrorHandler } from '../../middlewares/error-handler.middleware';
+
+const routeHandler = async (req: NextRequest) => {
+  const bonusTokenData = req.cookies.get('corporate__token');
+
+  if (!bonusTokenData) {
+    return NextResponse.json(
+      { error: 'User does not have access' },
+      { status: 401 },
+    );
+  }
+
+  const parsedData = JSON.parse(bonusTokenData.value);
+
+  return new Response(JSON.stringify(omit(parsedData, 'token')), {
+    headers: { 'Content-Type': 'application/json' },
+  });
+};
+
+export const GET = validationErrorHandler(routeHandler);
diff --git a/src/app/api/middlewares/error-handler.middleware.ts b/src/app/api/middlewares/error-handler.middleware.ts
index cc02041..d7fa719 100644
--- a/src/app/api/middlewares/error-handler.middleware.ts
+++ b/src/app/api/middlewares/error-handler.middleware.ts
@@ -2,9 +2,10 @@ import { NextRequest, NextResponse } from 'next/server';
 import { ZodError } from 'zod';
 
 export const validationErrorHandler =
-  (handler: Function) => async (req: NextRequest) => {
+  (handler: Function) =>
+  async (req: NextRequest, ...args: any[]) => {
     try {
-      return await handler(req);
+      return await handler(req, ...args);
     } catch (error) {
       if (error instanceof ZodError)
         return NextResponse.json({ message: error.format() }, { status: 400 });
diff --git a/src/entities/bonus/api/bonus.api.ts b/src/entities/bonus/api/bonus.api.ts
index b8d31bf..b83c712 100644
--- a/src/entities/bonus/api/bonus.api.ts
+++ b/src/entities/bonus/api/bonus.api.ts
@@ -1,6 +1,10 @@
 import { baseAPI } from '@/shared/api/base-api';
 
-import { ClientInfo } from '../model/types/bonus-client-info.type';
+import {
+  ClientInfo,
+  TransactionRequest,
+  TransactionResponse,
+} from '../model/types/bonus-client-info.type';
 
 export const bonusApi = baseAPI.injectEndpoints({
   endpoints: (builder) => ({
@@ -11,7 +15,19 @@ export const bonusApi = baseAPI.injectEndpoints({
         };
       },
     }),
+    fetchBonusTransactions: builder.query<
+      TransactionResponse,
+      TransactionRequest
+    >({
+      query: (request) => {
+        return {
+          url: '/bonus/transactions',
+          params: request,
+        };
+      },
+    }),
   }),
 });
 
-export const { useFetchMyBonusInfoQuery } = bonusApi;
+export const { useFetchMyBonusInfoQuery, useFetchBonusTransactionsQuery } =
+  bonusApi;
diff --git a/src/entities/bonus/model/types/bonus-client-info.type.ts b/src/entities/bonus/model/types/bonus-client-info.type.ts
index dd7138f..bc50a6c 100644
--- a/src/entities/bonus/model/types/bonus-client-info.type.ts
+++ b/src/entities/bonus/model/types/bonus-client-info.type.ts
@@ -6,3 +6,29 @@ export interface ClientInfo {
   end_date: string;
   bonuses: string;
 }
+
+export interface TransactionResponse {
+  transactions: Transaction[];
+  card_id: string;
+  current_page: number;
+  limit: number;
+  total_records: number;
+  total_pages: number;
+}
+
+export interface Transaction {
+  id: number;
+  date_create: string;
+  station: string;
+  product_name: string;
+  amount: string;
+  price_real: string;
+  sum_real: string;
+}
+
+export interface TransactionRequest {
+  start_date?: string;
+  end_date?: string;
+  page: number;
+  limit: number;
+}
diff --git a/src/entities/corporate/api/corporate.api.ts b/src/entities/corporate/api/corporate.api.ts
new file mode 100644
index 0000000..32426ac
--- /dev/null
+++ b/src/entities/corporate/api/corporate.api.ts
@@ -0,0 +1,17 @@
+import { baseAPI } from '@/shared/api/base-api';
+
+import { CorporateInfoResponse } from '../model/types/corporate-client-info.type';
+
+export const corporateApi = baseAPI.injectEndpoints({
+  endpoints: (builder) => ({
+    fetchMyCorporateInfo: builder.query<CorporateInfoResponse, any>({
+      query: () => {
+        return {
+          url: '/corporate/info',
+        };
+      },
+    }),
+  }),
+});
+
+export const { useFetchMyCorporateInfoQuery } = corporateApi;
diff --git a/src/entities/corporate/model/types/corporate-client-info.type.ts b/src/entities/corporate/model/types/corporate-client-info.type.ts
new file mode 100644
index 0000000..3a069ae
--- /dev/null
+++ b/src/entities/corporate/model/types/corporate-client-info.type.ts
@@ -0,0 +1,9 @@
+export interface CorporateInfoResponse {
+  created_at: string;
+  fund: string;
+  fund_total: string;
+  group_id: number;
+  group_name: string;
+  overdraft: string;
+  total_cards: number;
+}
diff --git a/src/pages-templates/(dashboard)/corporate-dashboard/index.tsx b/src/pages-templates/(dashboard)/corporate-dashboard/index.tsx
index 02ddedd..6f0bc94 100644
--- a/src/pages-templates/(dashboard)/corporate-dashboard/index.tsx
+++ b/src/pages-templates/(dashboard)/corporate-dashboard/index.tsx
@@ -4,6 +4,8 @@ import { subMonths } from 'date-fns';
 import { Building2, LogOut, Wallet } from 'lucide-react';
 import { useState } from 'react';
 
+import { useFetchMyCorporateInfoQuery } from '@/entities/corporate/api/corporate.api';
+
 import { useTextController } from '@/shared/language/hooks/use-text-controller';
 import { Button } from '@/shared/shadcn-ui/button';
 import {
@@ -96,6 +98,8 @@ export function CorporateDashboard() {
 
   const { t } = useTextController();
 
+  const { data, isLoading } = useFetchMyCorporateInfoQuery({});
+
   return (
     <div className='flex min-h-screen flex-col px-2.5'>
       <main className='flex-1 py-10'>
@@ -110,7 +114,11 @@ export function CorporateDashboard() {
 
           <div className='mb-10 grid gap-3 md:grid-cols-3 md:gap-6'>
             {/* Company Card */}
-            <Card data-aos='zoom-in' data-aos-mirror="true" className='md:col-span-2'>
+            <Card
+              data-aos='zoom-in'
+              data-aos-mirror='true'
+              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' />
@@ -118,55 +126,67 @@ export function CorporateDashboard() {
                 </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>
+                {!data ? (
+                  <>Loading</>
+                ) : (
+                  <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='truncate font-medium'>
+                          {data.group_name}
+                        </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'>{data.total_cards}</p>
+                      </div>
+                      <div className='space-y-1'>
+                        <p className='text-sm text-gray-500'>
+                          {t('corporate.companyCard.registrationDateLabel')}
+                        </p>
+
+                        <p className='font-medium'>
+                          {new Date(data.created_at).toLocaleDateString(
+                            'en-GB',
+                          )}
+                        </p>
+                      </div>
                     </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 className='mb-4 space-y-1'>
+                        <p className='text-sm text-gray-500'>
+                          {t('corporate.companyCard.fundLabel')}
+                        </p>
+                        <p className='font-medium'>
+                          {data.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'>
+                          {data.overdraft.toLocaleString()}{' '}
+                          {t('corporate.currency')}
+                        </p>
+                      </div>
                     </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 data-aos='zoom-in' data-aos-mirror="true" className='bg-gradient-to-br from-red-600 to-red-800 text-white'>
+            <Card
+              data-aos='zoom-in'
+              data-aos-mirror='true'
+              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' />
@@ -177,14 +197,18 @@ export function CorporateDashboard() {
                 </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>
+                {!data ? (
+                  <>Loading</>
+                ) : (
+                  <div className='text-center'>
+                    <p className='mb-2 text-4xl font-bold'>
+                      {data.fund_total?.toLocaleString()}
+                    </p>
+                    <p className='text-white/80'>
+                      {t('corporate.fundCard.currency')}
+                    </p>
+                  </div>
+                )}
               </CardContent>
             </Card>
           </div>
diff --git a/src/widgets/transactions-table.tsx b/src/widgets/transactions-table.tsx
index 03fe3ca..993ac00 100644
--- a/src/widgets/transactions-table.tsx
+++ b/src/widgets/transactions-table.tsx
@@ -3,7 +3,9 @@
 import { format, subMonths } from 'date-fns';
 import { ru } from 'date-fns/locale';
 import { CalendarIcon } from 'lucide-react';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
+
+import { useFetchBonusTransactionsQuery } from '@/entities/bonus/api/bonus.api';
 
 import { useTextController } from '@/shared/language/hooks/use-text-controller';
 import { Button } from '@/shared/shadcn-ui/button';
@@ -23,85 +25,30 @@ import {
   TableRow,
 } from '@/shared/shadcn-ui/table';
 
-// Sample customer data
-const customerData = {
-  firstName: 'Алишер',
-  lastName: 'Рахмонов',
-  passportNumber: 'A12345678',
-  bonusPoints: 1250,
-  cardNumber: '5678-9012-3456-7890',
-  expiryDate: '12/2025',
-  registrationDate: '15.06.2020',
-};
-
-// 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 const TransactionsTable = () => {
-  const [startDate, setStartDate] = useState<Date | undefined>(
-    subMonths(new Date(), 1),
-  );
-  const [endDate, setEndDate] = useState<Date | undefined>(new Date());
-  const [filteredTransactions, setFilteredTransactions] =
-    useState(transactions);
+  const [startDate, setStartDate] = useState<Date>(subMonths(new Date(), 1));
+  const [endDate, setEndDate] = useState<Date>(new Date());
+
+  const { data, refetch } = useFetchBonusTransactionsQuery({
+    limit: 100,
+    page: 1,
+    start_date: format(startDate, 'yyyy-MM-dd'),
+    end_date: format(endDate, 'yyyy-MM-dd'),
+  });
 
   // 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);
+    refetch();
   };
 
   const { t } = useTextController();
 
+  useEffect(() => {}, [startDate, endDate]);
+
+  if (!data) return null;
+
   return (
     <div className='space-y-6'>
       <div className='flex flex-col items-start justify-between gap-4 md:flex-row md:items-center'>
@@ -200,22 +147,22 @@ export const TransactionsTable = () => {
             </TableRow>
           </TableHeader>
           <TableBody>
-            {filteredTransactions.length > 0 ? (
-              filteredTransactions.map((transaction) => (
+            {data.transactions.length > 0 ? (
+              data.transactions.map((transaction) => (
                 <TableRow key={transaction.id}>
                   <TableCell>
-                    {format(transaction.date, 'dd.MM.yyyy')}
+                    {format(new Date(transaction.date_create), 'dd.MM.yyyy')}
                   </TableCell>
                   <TableCell>{transaction.station}</TableCell>
-                  <TableCell>{transaction.product}</TableCell>
+                  <TableCell>{transaction.product_name}</TableCell>
                   <TableCell className='text-right'>
-                    {transaction.quantity}
+                    {transaction.price_real}
                   </TableCell>
                   <TableCell className='text-right'>
-                    {transaction.cost.toFixed(2)} {t('corporate.currency')}
+                    {transaction.amount} {t('corporate.currency')}
                   </TableCell>
                   <TableCell className='text-right font-medium'>
-                    {transaction.total.toFixed(2)} {t('corporate.currency')}
+                    {transaction.sum_real} {t('corporate.currency')}
                   </TableCell>
                 </TableRow>
               ))