create products page

src/app/globals.css

@@ -158,7 +158,7 @@
 
 .container {
   width: 100%;
-  padding-inline: 10rem;
+  padding-inline: 1rem;
 
   @media (width >=40rem) {
     max-width: 40rem;
@@ -167,7 +167,7 @@
 
   @media (width >=48rem) {
     max-width: 48rem;
-    padding-inline: 1rem;
+    padding-inline: 2rem;
     }
 
   @media (width >=64rem) {

src/app/products/page.tsx

@@ -0,0 +1,55 @@
+import images from '@/assets/images/images';
+import InnerPageBanner from '@/components/layout/innerPages/banner';
+import ProductsCategoryCard from '@/components/pages/products/ProductCategoryCard';
+import type { IProductCategoryCardProps } from '@/components/pages/products/productCategoryCard.d';
+import { t } from '@/locales/translates';
+
+export default function ProductsPage() {
+  const productCategories = [
+    {
+      id: '1',
+      title: t('com_products_category_Ghazaghi_title') as string,
+      icon: 'categoryGhazaghi',
+      typesCount: 22,
+      priceTypeTitle: 'Economy',
+      bestForTitle: 'Best For Interior Part',
+    },
+    {
+      id: '2',
+      title: t('com_products_category_Ghermez_title') as string,
+      icon: 'categoryGhermez',
+      typesCount: 12,
+      priceTypeTitle: 'Luxury',
+      bestForTitle: 'Best For Exterior Part',
+    },
+    {
+      id: '3',
+      title: t('com_products_category_Zard_title') as string,
+      icon: 'categoryZard',
+      typesCount: 11,
+      priceTypeTitle: 'Economy',
+      bestForTitle: 'Best For Facing',
+    },
+    {
+      id: '40',
+      title: t('com_products_category_Semirom_title') as string,
+      icon: 'categorySemirom',
+      typesCount: 40,
+      priceTypeTitle: 'Economy',
+      bestForTitle: 'Best For Building',
+    },
+  ] as IProductCategoryCardProps[];
+  return (
+    <main>
+      <InnerPageBanner
+        title={t('pages_projects_title') as string}
+        imageSrc={images.aboutBanner.src}
+      />
+      <div className="container my-24 grid grid-cols-4 gap-4">
+        {productCategories.map((category) => (
+          <ProductsCategoryCard key={category.id} {...category} />
+        ))}
+      </div>
+    </main>
+  );
+}