update and add: update adaptability and added Loader

Reviewed-on: #10

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} />;
 }

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;
+};

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>;

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;

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,
+  }));

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,
 };

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,
+    },
+  },
+};

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' },

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>

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;

src/pages-templates/(dashboard)/corporate-dashboard/index.tsx

@@ -100,7 +100,7 @@ export function CorporateDashboard() {
     <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'>
+          <div className='mb-4 flex flex-col gap-4 items-start sm:justify-between sm:items-center sm:mb-8 sm:flex-row'>
             <h1 className='text-3xl font-bold'>{t('corporate.pageTitle')}</h1>
             <Button variant='outline' className='gap-2'>
               <LogOut className='h-4 w-4' />
@@ -110,7 +110,7 @@ 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 order-2 md:order-1'>
               <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 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 order-1 md:order-2'>
               <CardHeader>
                 <CardTitle className='flex items-center gap-2'>
                   <Wallet className='h-5 w-5' />

src/pages-templates/(dashboard)/customer-dashboard/index.tsx

@@ -15,6 +15,7 @@ import {
 } from '@/shared/shadcn-ui/card';
 
 import { TransactionsTable } from '@/widgets/transactions-table';
+import Loader from '@/shared/shadcn-ui/loader';
 
 export function CustomerDashboard() {
   const { t } = useTextController();
@@ -36,8 +37,7 @@ export function CustomerDashboard() {
           <div className='mb-10 grid gap-3 md:grid-cols-3 md:gap-6'>
             <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</>
+                <Loader/>
               ) : (
                 <>
                   <CardHeader>
@@ -82,8 +82,7 @@ export function CustomerDashboard() {
               </CardHeader>
               <CardContent>
                 {!data || isLoading ? (
-                  // TODO: Bunyod please add loader here
-                  <>Loader here</>
+                  <Loader/>
                 ) : (
                   <div className='grid gap-6 md:grid-cols-2'>
                     <div>

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')}
@@ -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}
@@ -237,7 +251,7 @@ export default function AboutPage() {
         {/* Our Team */}
         <Container>
           <section className='bg-gray-50 py-16'>
-            <div className='container mx-auto'>
+            <div className='container mx-auto px-2'>
               <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' />
@@ -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>
                 ))}

src/shared/providers/aos-provider.tsx

@@ -10,7 +10,19 @@ interface AosInitProps {
 
 export const AosProvider = ({ children }: AosInitProps) => {
   useEffect(() => {
-    AOS.init({ once: false, mirror: false,  });
+    const timer = setTimeout(() => {
+      AOS.init({
+        once: false,
+        offset: 100,
+        duration: 600,
+        easing: 'ease-out-quart',
+      });
+    }, 500);
+
+    return () => {
+      clearTimeout(timer);
+      AOS.refreshHard();
+    };
   }, []);
 
   return <>{children}</>;

src/shared/shadcn-ui/loader.tsx

@@ -0,0 +1,9 @@
+'use client'
+
+export default function Loader() {
+    return (
+        <div className="flex justify-center items-center p-8">
+            <div className="animate-spin rounded-full h-14 w-14 border-4 border-black border-t-transparent"></div>
+        </div>
+    )
+}

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'

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'>

src/widgets/hero-section.tsx

@@ -12,7 +12,7 @@ export const HeroSection = () => {
 
   return (
     <section className='relative'>
-      <div className='relative h-[300px] w-full overflow-hidden md:h-[500px] xl:h-[700px]'>
+      <div className='relative h-[400px] w-full overflow-hidden sm:h-[500px] xl:h-[700px]'>
         <Image
           src='/oriyo_bg.jpeg'
           alt='Gas Station Network'
@@ -24,14 +24,14 @@ export const HeroSection = () => {
           <div className='container mx-auto'>
             <div className='max-w-lg space-y-4 text-white'>
               <div className='animate-fade animate-duration-[3000ms] animate-ease-in-out'>
-                <h1 className='text-2xl font-bold tracking-tight sm:text-4xl md:text-6xl'>
+                <h1 className='font-bold tracking-tight text-4xl md:text-6xl'>
                   {t('home.hero.title')}
                 </h1>
               </div>
               <p className='text-gray-200 sm:text-lg'>
                 {t('home.hero.description')}
               </p>
-              <div className='flex flex-col gap-2 sm:flex-row sm:gap-4'>
+              <div className='flex flex-col mt-6 gap-2 sm:flex-row sm:gap-4'>
                 <Link href='#'>
                   <Button className='bg-red-600 hover:bg-red-700'>
                     {t('common.buttons.findStation')}{' '}

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/index';
 
 import PromotionSlider from '@/shared/components/promotion-slider';
 import { useTextController } from '@/shared/language/hooks/use-text-controller';

src/widgets/transactions-table.tsx

@@ -110,7 +110,7 @@ export const TransactionsTable = () => {
         </h2>
 
         <div className='flex w-full flex-col gap-4 md:w-auto md:flex-row'>
-          <div className='grid grid-cols-2 gap-2'>
+          <div className='grid sm:grid-cols-2 gap-2'>
             <div className='flex items-center gap-2'>
               <Label htmlFor='start-date'>
                 {t('corporate.transactions.dateFrom')}

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/index';
 
 import { useTextController } from '@/shared/language/hooks/use-text-controller';
 import { cn } from '@/shared/lib/utils';