Integrated about us page

2025-05-01 22:52:21 +05:00 · 2025-05-01 22:52:21 +05:00 · 148fd20b66
commit 148fd20b66
parent a839f37c27
13 changed files with 228 additions and 161 deletions
--- 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} />;
 }
--- a/src/app/api-utlities/@types/about-us.ts
+++ 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;
+};
--- 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>;
--- 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;
--- 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,
+  }));
--- 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,
 };
--- 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,
+    },
+  },
+};
--- 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' },
--- 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>
--- a/src/features/pages/api/pages.api.ts
+++ 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;
--- 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>
                ))}
--- 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'
--- 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'>