about page dymanic

2026-02-26 12:24:18 +05:00
parent a2be8ef125
commit 18cfa5cdf9
7 changed files with 215 additions and 118 deletions
--- a/src/features/about/ui/AboutContent.tsx
+++ b/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 = [
-    {
-      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 { locale } = useParams();

-  const images = [
-    {
-      url: '/professional-chef-cooking-gourmet-food.jpg',
-      alt: 'Professional Oshpaz',
+  const { data: about, isLoading: loadingText } = useQuery({
+    queryKey: ['aboutText'],
+    queryFn: async () => {
+      return partner_api.getAbout();
    },
-    {
-      url: '/fine-dining-restaurant-plating.jpg',
-      alt: 'Fine Dining',
+    select(data) {
+      return data.data;
    },
-    {
-      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(
-              `Gastro Market – bu gastronomiya dunyosidagi eng so'nggi yangiliklarni`,
-            )}
-          </p>
-          <p className="text-lg text-muted-foreground leading-relaxed">
-            {t(`Bizning jamoamiz tajribali kulinariya mutaxassislari`)}
+            {locale === 'uz'
+              ? aboutText?.[0]?.description_uz ||
+                "Gastronomiya va kulinariya san'ati haqidagi yetakchi onlayn magazin"
+              : locale === 'ru'
+                ? aboutText?.[0]?.description_ru ||
+                  'Ведущий интернет-магазин по гастрономии и кулинарному искусству'
+                : 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'}
-                  alt={image.alt}
+                  src={BASE_URL + image.image || '/placeholder.svg'}
+                  alt={image.id.toString()}
                  unoptimized
                  className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110"
                />
--- a/src/features/about/ui/AboutHero.tsx
+++ b/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>