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