64 lines
2.0 KiB
TypeScript
64 lines
2.0 KiB
TypeScript
|
import images from '@/assets/images/images';
|
||
|
|
import SectionTitle from '@/components/layout/sectionTitle';
|
||
|
|
import { t } from '@/locales/translates';
|
||
|
|
|
||
|
|
export default function HomePageProducts() {
|
||
|
|
const productCategories = [
|
||
|
|
{
|
||
|
|
title: 'Brick Categories',
|
||
|
|
count: 30,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: 'Brick Categories',
|
||
|
|
count: 30,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: 'Brick Categories',
|
||
|
|
count: 30,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: 'Brick Categories',
|
||
|
|
count: 30,
|
||
|
|
},
|
||
|
|
];
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="w-full">
|
||
|
|
<div
|
||
|
|
className={`relative w-full bg-cover bg-fixed bg-center bg-no-repeat pt-28 pb-48`}
|
||
|
|
style={{ backgroundImage: `url(${images.homeBanner.src})` }}
|
||
|
|
>
|
||
|
|
<div className="absolute inset-0 z-10 bg-black opacity-50" />
|
||
|
|
<div className="relative z-20 container mx-auto grid grid-cols-2 gap-28">
|
||
|
|
<SectionTitle
|
||
|
|
title={t('page_products_title') as string}
|
||
|
|
description={t('com_home_products_title') as string}
|
||
|
|
reverseColor
|
||
|
|
/>
|
||
|
|
<h4 className="pt-10 text-base font-extralight tracking-normal text-white">
|
||
|
|
{t('com_home_products_description') as string}
|
||
|
|
</h4>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="relative top-[-100px] z-20 container mx-auto w-full">
|
||
|
|
<div className="grid grid-cols-1 gap-8 rounded-4xl bg-gray-50 py-10 shadow-2xl md:grid-cols-2 lg:grid-cols-4">
|
||
|
|
{productCategories.map((category, index) => (
|
||
|
|
<div
|
||
|
|
key={index}
|
||
|
|
className={`flex flex-col items-center justify-center gap-4 p-6 text-center ${index ? 'border-s-[1px] border-gray-100' : ''}`}
|
||
|
|
>
|
||
|
|
<h3 className="text-xl font-bold text-gray-500">
|
||
|
|
{category.title}
|
||
|
|
</h3>
|
||
|
|
<p className="text-lg font-light text-gray-400">
|
||
|
|
{`Includes ${category.count} Products`}
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|