zahravaziri
63 lines
2.6 KiB
TypeScript
63 lines
2.6 KiB
TypeScript
import images from '@/assets/images/images';
|
|
import SectionTitle from '@/components/layout/sectionTitle';
|
|
import type { IProductCategoryCardProps } from '../productCategories/productCategoryCard.d';
|
|
import { getProductCategories } from '@/services/products';
|
|
import Link from 'next/link';
|
|
import routeFactory from '@/assets/constants/routeFactory';
|
|
import { getTranslations } from 'next-intl/server';
|
|
import { ILayoutLocaleParams } from '@/models/layout';
|
|
import { TLocales } from '@/models/layout';
|
|
|
|
interface Props {
|
|
locale: TLocales;
|
|
}
|
|
|
|
export default async function HomePageProducts({ locale }: Props) {
|
|
const t = await getTranslations({ locale });
|
|
const productCategories: IProductCategoryCardProps[] =
|
|
await getProductCategories();
|
|
const routes = routeFactory(t, locale);
|
|
|
|
return (
|
|
<div className="w-full">
|
|
<div
|
|
className={`relative w-full bg-cover bg-fixed bg-center bg-no-repeat pt-28 pb-20 max-lg:pt-6 md:pb-48`}
|
|
style={{ backgroundImage: `url(${images.homeProductBack.src})` }}
|
|
>
|
|
<div className="absolute inset-0 z-10 bg-black opacity-50" />
|
|
<div className="relative z-20 container mx-auto grid grid-cols-1 gap-0 lg:grid-cols-2 lg:gap-28">
|
|
<SectionTitle
|
|
title={t('pages_product_categories_title')}
|
|
description={t('com_home_products_title')}
|
|
reverseColor
|
|
/>
|
|
<h4 className="pt-6 text-base font-extralight tracking-normal text-white lg:pt-10">
|
|
{t('com_home_products_description')}
|
|
</h4>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="relative -top-7 z-20 container mx-auto w-full md:top-[-100px]">
|
|
<div className="grid grid-cols-1 gap-8 rounded-4xl bg-gray-50 py-10 shadow-2xl max-md:gap-0 max-md:py-5 md:grid-cols-2 lg:grid-cols-4">
|
|
{productCategories.map((category, index) => (
|
|
<Link key={category.id} href={routes.products.route(category.id)}>
|
|
<div
|
|
className={`flex flex-col items-center justify-center gap-4 p-6 text-center max-md:gap-2 ${index ? 'border-s-[1px] border-gray-100' : ''} ${index !== productCategories.length - 1 ? `border-gray-100 max-md:border-b-[1px]` : ''}`}
|
|
>
|
|
<h3 className="text-xl font-bold text-gray-500">
|
|
{category.title}
|
|
</h3>
|
|
<p className="text-lg font-light text-gray-400">
|
|
{t('com_products_category_types_count', {
|
|
count: category.typesCount,
|
|
})}
|
|
</p>
|
|
</div>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|