75 lines
2.7 KiB
TypeScript
75 lines
2.7 KiB
TypeScript
'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 { 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">
|
|
<Image
|
|
width={500}
|
|
height={500}
|
|
unoptimized
|
|
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">
|
|
{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">
|
|
{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>
|
|
);
|
|
}
|