feat: add product category components and services

- Implemented ProductCategoryCard component for displaying product categories with icons, titles, and counts.
- Created ProductCategoryCardInProducts component for rendering product categories in a product context.
- Defined TypeScript interfaces for product category props.
- Added ProductCard component for individual product display with image and title.
- Established Axios instance for API calls with request and response interceptors.
- Developed services for fetching product categories and category details from the API.

src/components/pages/home/Products.tsx

@@ -31,7 +31,7 @@ export default function HomePageProducts() {
         <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('pages_products_title') as string}
+            title={t('pages_product_categories_title') as string}
             description={t('com_home_products_title') as string}
             reverseColor
           />

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-12">
+    <div className="relative overflow-hidden rounded-4xl bg-gray-100 p-10">
       <div className="absolute -end-2 -top-2">
         <Icon name={icon} className="text-primary h-36 w-36" />
       </div>
@@ -31,8 +31,14 @@ export default function ProductsCategoryCard({
         <AchievementTextBox title={priceTypeTitle} />
         <AchievementTextBox title={bestForTitle} />
       </div>
-      <div className="mt-24">
-        <Button link={routeFactory.products.route()}>See All</Button>
+      <div className="mt-24 w-auto">
+        <Button
+          link={routeFactory.products.route(id)}
+          endIcon="showMore"
+          className="w-fit"
+        >
+          {t('com_products_category_show_all_CTA') as string}
+        </Button>
       </div>
     </div>
   );

src/components/pages/productCategories/ProductCategoryCardInProducts.tsx

@@ -0,0 +1,9 @@
+import type { IProductCategoryCardProps } from './productCategoryCard.d';
+
+export default function ProductCategoryCardInProducts(
+  productCategory: IProductCategoryCardProps,
+) {
+  return (
+    <div className="bg-primary relative overflow-hidden rounded-4xl p-20 pe-40"></div>
+  );
+}

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

@@ -0,0 +1,5 @@
+export interface IProductCategoryCardIconProps {
+  type: IProductCategory;
+}
+
+export type IProductCategory = 'ghazaghi' | 'ghermez' | 'zard' | 'semirom';

src/components/pages/products/ProductCard.tsx

@@ -0,0 +1,21 @@
+import type { IProductCardProps } from './productCard.d';
+
+export default function ProductCard({
+  title,
+  imageSrc,
+  size,
+}: IProductCardProps) {
+  return (
+    <div className="overflow-hidden rounded-xl bg-gray-200 p-4">
+      <div className="aspect-square w-full">
+        <img
+          src={imageSrc}
+          alt={title}
+          className="h-full w-full object-cover"
+        />
+      </div>
+      <h3 className="mt-4 mb-10 text-xl font-bold text-gray-500">{title}</h3>
+      <span className="text-base font-normal text-gray-300">{size}</span>
+    </div>
+  );
+}

src/components/pages/products/productCard.d.ts

@@ -0,0 +1,5 @@
+export interface IProductCardProps {
+  imageSrc: string;
+  title: string;
+  size: string;
+}