fixed

src/app/[locale]/about/AboutSEO.tsx

@@ -0,0 +1,38 @@
+'use client';
+
+import { partner_api } from '@/features/about/lib/api';
+import { useQuery } from '@tanstack/react-query';
+import { useParams } from 'next/navigation';
+import { useEffect } from 'react';
+
+export default function AboutSEO() {
+  const { locale } = useParams();
+
+  const { data } = useQuery({
+    queryKey: ['aboutData'],
+    queryFn: async () => (await partner_api.getAbout()).data,
+  });
+
+  useEffect(() => {
+    if (!data) return;
+    const banner = data.banner;
+    const title =
+      locale === 'uz'
+        ? banner.title_uz
+        : locale === 'ru'
+          ? banner.title_ru
+          : banner.title_en;
+    const description =
+      locale === 'uz'
+        ? banner.description_uz
+        : locale === 'ru'
+          ? banner.description_ru
+          : banner.description_en;
+
+    document.title = title || 'Gastro Market';
+    const descMeta = document.querySelector('meta[name="description"]');
+    if (descMeta) descMeta.setAttribute('content', description || '');
+  }, [data, locale]);
+
+  return null;
+}

src/app/[locale]/about/page.tsx

@@ -1,59 +1,83 @@
+// app/[locale]/about/page.tsx
+export const dynamic = 'force-dynamic';
 import { AboutContent } from '@/features/about/ui/AboutContent';
 import { AboutHero } from '@/features/about/ui/AboutHero';
 import { PartnershipForm } from '@/features/about/ui/AboutPage';
+import { BASE_URL } from '@/shared/config/api/URLs';
 import { Metadata } from 'next';
 
+function getImageUrl(image?: string | null): string {
+  if (!image) return '/placeholder.svg';
+  return image.includes(BASE_URL) ? image : BASE_URL + image;
+}
+
+const fetchAboutData = async () => {
+  const res = await fetch(
+    'https://api.gastro.felixits.uz/api/v1/shared/aboutus/',
+    { cache: 'no-store' },
+  );
+  if (!res.ok) throw new Error(`Failed to fetch about data: ${res.status}`);
+  const data = await res.json();
+  return data.banner;
+};
+
 interface Props {
-  params: { locale: 'uz' | 'ru' };
+  params: Promise<{ locale: 'uz' | 'ru' | 'en' }>;
 }
 
 export async function generateMetadata({ params }: Props): Promise<Metadata> {
   const { locale } = await params;
 
-  const titles = {
+  try {
-    uz: 'Biz haqimizda | GASTRO',
+    const banner = await fetchAboutData();
-    ru: 'О нас | Магазин товаров',
-  };
 
-  const descriptions = {
+    const title =
-    uz: 'Bizning onlayn do‘konimizda sifatli mahsulotlarni toping. Tez yetkazib berish va qulay to‘lov imkoniyatlari mavjud.',
+      locale === 'uz'
-    ru: 'В нашем онлайн-магазине вы найдете качественные товары. Быстрая доставка и удобная оплата.',
+        ? banner.title_uz
-  };
+        : locale === 'ru'
+          ? banner.title_ru
+          : banner.title_en;
 
-  const keywords = {
+    const description =
-    uz: 'mahsulot, onlayn do‘kon, xarid, yetkazib berish',
+      locale === 'uz'
-    ru: 'товары, онлайн-магазин, покупка, доставка',
+        ? banner.description_uz
-  };
+        : locale === 'ru'
+          ? banner.description_ru
+          : banner.description_en;
 
-  return {
+    return {
-    title: titles[locale],
+      title: title || 'Gastro Market',
-    description: descriptions[locale],
+      description: description || 'Gastro Market mahsulotlarini kashf eting',
-    keywords: keywords[locale],
+      openGraph: {
-    openGraph: {
+        title: title || 'Gastro Market',
-      title: titles[locale],
+        description: description || 'Gastro Market mahsulotlarini kashf eting',
-      description: descriptions[locale],
+        type: 'website',
-      siteName: 'GASTRO',
+        images: [
-      images: [
+          {
-        {
+            url: getImageUrl(banner.image),
-          url: '/logos/logo.png',
+            width: 1200,
-          width: 1200,
+            height: 630,
-          height: 1200,
+            alt: title,
-          alt: titles[locale],
+          },
-        },
+        ],
-      ],
+      },
-      locale: locale === 'uz' ? 'uz_UZ' : 'ru_RU',
+      twitter: {
-      type: 'website',
+        card: 'summary_large_image',
-    },
+        title: title || 'Gastro Market',
-    twitter: {
+        description: description || 'Gastro Market mahsulotlarini kashf eting',
-      card: 'summary_large_image',
+        images: [getImageUrl(banner.image)],
-      title: titles[locale],
+      },
-      description: descriptions[locale],
+    };
-      images: ['/logos/logo.png'],
+  } catch (err) {
-    },
+    console.error('About metadata error:', err);
-  };
+    return {
+      title: 'Gastro Market',
+      description: 'Gastro Market mahsulotlarini kashf eting',
+    };
+  }
 }
 
-const page = () => {
+const AboutPage = async () => {
   return (
     <div className="custom-container">
       <AboutHero />
@@ -63,4 +87,4 @@ const page = () => {
   );
 };
 
-export default page;
+export default AboutPage;

src/features/about/lib/api.ts

@@ -1,9 +1,16 @@
 import httpClient from '@/shared/config/api/httpClient';
 import { API_URLS } from '@/shared/config/api/URLs';
+import { AxiosResponse } from 'axios';
+import { AboutData } from './type';
 
 export const partner_api = {
   async send(body: FormData) {
     const res = httpClient.post(API_URLS.Partners, body);
     return res;
   },
+
+  async getAbout(): Promise<AxiosResponse<AboutData>> {
+    const res = httpClient.get(API_URLS.About);
+    return res;
+  },
 };

src/features/about/lib/type.ts

@@ -4,3 +4,35 @@ export interface PartnerSendBody {
   phone_number: string;
   file: File;
 }
+
+export interface AboutData {
+  banner: {
+    id: number;
+    created_at: string;
+    updated_at: string;
+    title_uz: string;
+    title_ru: string;
+    title_en: string;
+    description_uz: string;
+    description_ru: string;
+    description_en: string;
+    image: string;
+  };
+  images: {
+    id: number;
+    created_at: string;
+    updated_at: string;
+    image: string;
+  }[];
+  text: {
+    id: number;
+    created_at: string;
+    updated_at: string;
+    title_uz: string;
+    title_ru: string;
+    title_en: string;
+    description_uz: string;
+    description_ru: string;
+    description_en: string;
+  }[];
+}

src/features/about/ui/AboutContent.tsx

@@ -1,85 +1,80 @@
-import { Card } from '@/shared/ui/card';
+'use client';
+
+import { BASE_URL } from '@/shared/config/api/URLs';
+import { Skeleton } from '@/shared/ui/skeleton';
+import { useQuery } from '@tanstack/react-query';
 import { useTranslations } from 'next-intl';
 import Image from 'next/image';
+import { useParams } from 'next/navigation';
+import { partner_api } from '../lib/api';
 
 export function AboutContent() {
   const t = useTranslations();
-  const features = [
+  const { locale } = useParams();
-    {
-      number: '1',
-      title: 'Sifatli Kontent',
-      description:
-        "Jahon oshpazlik san'ati va zamonaviy gastronomiya tendentsiyalari haqida chuqur maqolalar va tahlillar",
-    },
-    {
-      number: '2',
-      title: 'Professional Jamoa',
-      description:
-        'Tajribali kulinariya mutaxassislari va oshpazlar tomonidan tayyorlangan kontent',
-    },
-    {
-      number: '3',
-      title: 'Yangiliklar',
-      description:
-        "Gastronomiya sohasidagi so'nggi yangiliklar va eng yangi trendlar haqida xabarlar",
-    },
-  ];
 
-  const images = [
+  const { data: about, isLoading: loadingText } = useQuery({
-    {
+    queryKey: ['aboutText'],
-      url: '/professional-chef-cooking-gourmet-food.jpg',
+    queryFn: async () => {
-      alt: 'Professional Oshpaz',
+      return partner_api.getAbout();
     },
-    {
+    select(data) {
-      url: '/fine-dining-restaurant-plating.jpg',
+      return data.data;
-      alt: 'Fine Dining',
     },
-    {
+  });
-      url: '/fresh-ingredients-culinary-market.jpg',
+
-      alt: 'Fresh Ingredients',
+  const aboutText = about?.text;
-    },
+  const images = about?.images;
-  ];
+
+  // Loading holati
+  if (loadingText) {
+    return (
+      <section className="py-20 px-4">
+        <div className="max-w-7xl mx-auto">
+          {/* Text Skeleton */}
+          <div className="mb-20 text-center space-y-6">
+            <Skeleton className="h-12 md:h-16 w-3/4 mx-auto rounded-lg" />
+            <Skeleton className="h-6 md:h-8 w-5/6 mx-auto rounded-lg" />
+            <Skeleton className="h-6 md:h-8 w-5/6 mx-auto rounded-lg" />
+          </div>
+
+          {/* Image Gallery Skeleton */}
+          <div className="mb-20">
+            <Skeleton className="h-8 w-1/3 mx-auto rounded-lg mb-12" />
+            <div className="grid md:grid-cols-3 gap-6">
+              {[...Array(3)].map((_, idx) => (
+                <Skeleton
+                  key={idx}
+                  className="aspect-[4/3] w-full rounded-lg"
+                />
+              ))}
+            </div>
+          </div>
+        </div>
+      </section>
+    );
+  }
 
   return (
     <section className="py-20 px-4">
       <div className="max-w-7xl mx-auto">
-        {/* Mission Section */}
-        <div className="mb-20">
-          <h2 className="text-4xl md:text-5xl font-bold text-center mb-16 text-balance">
-            {t('Bizning maqsadimiz')}
-          </h2>
-          <div className="grid md:grid-cols-3 gap-8">
-            {features.map((feature) => (
-              <Card
-                key={feature.number}
-                className="p-8 hover:shadow-lg transition-shadow"
-              >
-                <div className="text-6xl font-bold text-primary mb-4">
-                  {feature.number}
-                </div>
-                <h3 className="text-2xl font-semibold mb-4">
-                  {t(feature.title)}
-                </h3>
-                <p className="text-muted-foreground leading-relaxed">
-                  {t(feature.description)}
-                </p>
-              </Card>
-            ))}
-          </div>
-        </div>
-
         {/* About Text */}
-        <div className="mb-20 max-w-4xl mx-auto text-center">
+        <div className="mb-20 text-center">
           <h2 className="text-3xl md:text-4xl font-bold mb-8 text-balance">
-            {t('Innovatsiya, sifat va professionallik')}
+            {locale === 'uz'
+              ? aboutText?.[0]?.title_uz || 'Gastro Market'
+              : locale === 'ru'
+                ? aboutText?.[0]?.title_ru || 'Gastro Market'
+                : aboutText?.[0]?.title_en || 'Gastro Market'}
           </h2>
           <p className="text-lg text-muted-foreground leading-relaxed mb-6">
-            {t(
+            {locale === 'uz'
-              `Gastro Market – bu gastronomiya dunyosidagi eng so'nggi yangiliklarni`,
+              ? aboutText?.[0]?.description_uz ||
-            )}
+                "Gastronomiya va kulinariya san'ati haqidagi yetakchi onlayn magazin"
-          </p>
+              : locale === 'ru'
-          <p className="text-lg text-muted-foreground leading-relaxed">
+                ? aboutText?.[0]?.description_ru ||
-            {t(`Bizning jamoamiz tajribali kulinariya mutaxassislari`)}
+                  'Ведущий интернет-магазин по гастрономии и кулинарному искусству'
+                : aboutText?.[0]?.description_en ||
+                  "Gastronomiya va kulinariya san'ati haqidagi yetakchi onlayn magazin"}
           </p>
         </div>
 
@@ -89,7 +84,7 @@ export function AboutContent() {
             {t('Bizning dunyo')}
           </h3>
           <div className="grid md:grid-cols-3 gap-6">
-            {images.map((image, idx) => (
+            {images?.map((image, idx) => (
               <div
                 key={idx}
                 className="relative aspect-[4/3] overflow-hidden rounded-lg group"
@@ -97,8 +92,8 @@ export function AboutContent() {
                 <Image
                   width={500}
                   height={500}
-                  src={image.url || '/placeholder.svg'}
+                  src={BASE_URL + image.image || '/placeholder.svg'}
-                  alt={image.alt}
+                  alt={image.id.toString()}
                   unoptimized
                   className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110"
                 />

src/features/about/ui/AboutHero.tsx

@@ -1,8 +1,40 @@
-import { useTranslations } from 'next-intl';
+'use client';
+
+import { BASE_URL } from '@/shared/config/api/URLs';
+import { Skeleton } from '@/shared/ui/skeleton';
+import { useQuery } from '@tanstack/react-query';
 import Image from 'next/image';
+import { useParams } from 'next/navigation';
+import { partner_api } from '../lib/api';
 
 export function AboutHero() {
-  const t = useTranslations();
+  const { locale } = useParams();
+
+  const { data: banner, isLoading } = useQuery({
+    queryKey: ['about'],
+    queryFn: async () => {
+      return partner_api.getAbout();
+    },
+    select(data) {
+      return data.data.banner;
+    },
+  });
+
+  if (isLoading) {
+    return (
+      <section className="relative h-[60vh] min-h-[500px] flex items-center rounded-lg justify-center overflow-hidden bg-gray-200">
+        {/* Background skeleton */}
+        <Skeleton className="absolute inset-0 w-full h-full" />
+        {/* Content skeleton */}
+        <div className="relative z-10 text-center px-4 max-w-4xl mx-auto space-y-6">
+          <Skeleton className="h-16 md:h-24 w-3/4 mx-auto rounded-lg" />
+          <Skeleton className="h-6 md:h-10 w-5/6 mx-auto rounded-lg" />
+          <Skeleton className="h-6 md:h-10 w-4/6 mx-auto rounded-lg" />
+        </div>
+      </section>
+    );
+  }
+
   return (
     <section className="relative h-[60vh] min-h-[500px] flex items-center justify-center overflow-hidden">
       <div className="absolute inset-0 z-0">
@@ -10,19 +42,31 @@ export function AboutHero() {
           width={500}
           height={500}
           unoptimized
-          src="/gourmet-food-culinary-magazine-hero-image.jpg"
+          src={
+            BASE_URL + banner?.image ||
+            '/gourmet-food-culinary-magazine-hero-image.jpg'
+          }
           alt="Gastro Market"
           className="w-full h-full object-cover brightness-50"
         />
       </div>
       <div className="relative z-10 text-center px-4 max-w-4xl mx-auto">
         <h1 className="text-5xl md:text-7xl font-bold text-white mb-6 text-balance">
-          Gastro Market
+          {locale === 'uz'
+            ? banner?.title_uz || 'Gastro Market'
+            : locale === 'ru'
+              ? banner?.title_ru || 'Gastro Market'
+              : banner?.title_en || 'Gastro Market'}
         </h1>
         <p className="text-xl md:text-2xl text-white/90 font-light leading-relaxed text-balance">
-          {t(
+          {locale === 'uz'
-            "Gastronomiya va kulinariya san'ati haqidagi yetakchi onlayn magazin",
+            ? banner?.description_uz ||
-          )}
+              "Gastronomiya va kulinariya san'ati haqidagi yetakchi onlayn magazin"
+            : locale === 'ru'
+              ? banner?.description_ru ||
+                'Ведущий интернет-магазин по гастрономии и кулинарному искусству'
+              : banner?.description_en ||
+                "Gastronomiya va kulinariya san'ati haqidagi yetakchi onlayn magazin"}
         </p>
       </div>
     </section>

src/features/category/ui/SubCategory.tsx

@@ -27,8 +27,6 @@ const SubCategory = () => {
     router.push(`/category/${categoryId}/${subCategory.id}`);
   };
 
-  console.log(categorys);
-
   return (
     <div className="custom-container">
       <>

src/shared/config/api/URLs.ts

@@ -24,4 +24,5 @@ export const API_URLS = {
   OrderList: `${API_V}orders/order/list/`,
   Refresh_Token: `${API_V}accounts/refresh/token/`,
   Get_Me: `${API_V}accounts/me/`,
+  About: `${API_V}shared/aboutus/`,
 };