about page dymanic

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(
-            "Gastronomiya va kulinariya san'ati haqidagi yetakchi onlayn magazin",
-          )}
+          {locale === 'uz'
+            ? 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>