Merge remote-tracking branch 'origin/main' into navbar

src/components/pages/about/TopInfo.tsx

@@ -1,3 +1,4 @@
+import routeFactory from '@/assets/constants/routeFactory';
 import images from '@/assets/images/images';
 import AchievementTextBox from '@/components/layout/achievementTextBox';
 import SectionTitle from '@/components/layout/sectionTitle';
@@ -60,7 +61,7 @@ export default function AboutTopInfo() {
             ))}
           </div>
           <div className="mt-10">
-            <Button endIcon="showMore">
+            <Button endIcon="showMore" link={routeFactory.contact.route()}>
               {t('pages_contact_title') as string}
             </Button>
           </div>

src/components/pages/home/Products.tsx

@@ -1,26 +1,14 @@
 import images from '@/assets/images/images';
 import SectionTitle from '@/components/layout/sectionTitle';
 import { t } from '@/locales/translates';
+import type { IProductCategoryCardProps } from '../productCategories/productCategoryCard.d';
+import { getProductCategories } from '@/services/products';
+import Link from 'next/link';
+import routeFactory from '@/assets/constants/routeFactory';
 
-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,
-    },
-  ];
+export default async function HomePageProducts() {
+  const productCategories: IProductCategoryCardProps[] =
+    await getProductCategories();
 
   return (
     <div className="w-full">
@@ -44,17 +32,19 @@ export default function HomePageProducts() {
       <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>
+            <Link href={routeFactory.products.route(category.id)}>
+              <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.typesCount} Products`}
+                </p>
+              </div>
+            </Link>
           ))}
         </div>
       </div>

src/components/pages/productCategories/ProductCategoryCard.tsx

@@ -14,7 +14,7 @@ export default function ProductsCategoryCard({
   id,
 }: IProductCategoryCardProps) {
   return (
-    <div className="relative overflow-hidden rounded-4xl bg-gray-100 p-10">
+    <div className="relative overflow-hidden rounded-4xl bg-gray-100 p-3 sm:p-6 md:p-10">
       <div className="absolute -end-2 -top-2">
         <Icon name={icon} className="text-primary h-36 w-36" />
       </div>

src/components/pages/productCategories/ProductCategoryCardInProducts.tsx

@@ -1,9 +1,58 @@
+import AchievementTextBox from '@/components/layout/achievementTextBox';
 import type { IProductCategoryCardProps } from './productCategoryCard.d';
+import { t } from '@/locales/translates';
+import { Icon } from '@/components/uikit/icons';
 
-export default function ProductCategoryCardInProducts(
-  productCategory: IProductCategoryCardProps,
-) {
+export default function ProductCategoryCardInProducts({
+  productCategory,
+  className,
+}: {
+  productCategory: IProductCategoryCardProps;
+  className?: string;
+}) {
   return (
-    <div className="bg-primary relative overflow-hidden rounded-4xl p-20 pe-40"></div>
+    <div className="">
+      <div
+        className={`bg-primary relative grid overflow-hidden rounded-4xl p-6 max-lg:pt-24 max-lg:pb-12 lg:grid-cols-2 lg:p-20 lg:pe-40 ${className}`}
+      >
+        <div className="absolute -end-2 -top-2">
+          <Icon
+            name={productCategory.icon}
+            className="h-24 w-24 text-white md:h-36 md:w-36"
+          />
+        </div>
+        <div className="flex flex-col gap-5">
+          <h1 className="text-2xl font-semibold text-white">
+            {
+              t('com_products_products_category_title', {
+                title: productCategory.title,
+              }) as string
+            }
+          </h1>
+          <AchievementTextBox
+            reverseColor
+            title={
+              t('com_products_category_types_count', {
+                count: productCategory.typesCount,
+              }) as string
+            }
+          />
+          <AchievementTextBox
+            reverseColor
+            title={productCategory.priceTypeTitle}
+          />
+          <AchievementTextBox
+            reverseColor
+            title={productCategory.bestForTitle}
+          />
+        </div>
+        <p className="text-xl text-white max-lg:hidden">
+          {productCategory.description}
+        </p>
+      </div>
+      <p className="mt-5 text-xl text-gray-500 lg:hidden">
+        {productCategory.description}
+      </p>
+    </div>
   );
 }

src/components/pages/productCategories/productCategoryCard.d.ts

@@ -7,4 +7,5 @@ export interface IProductCategoryCardProps {
   typesCount: number;
   priceTypeTitle: string;
   bestForTitle: string;
+  description: string;
 }