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/layout/navbar/index.tsx

@@ -17,7 +17,7 @@
 //     { href: '/about', label: t('pages_about_title') as string },
 //     { href: '/blog', label: t('pages_contact_title') as string },
 //     { href: '/contact', label: t('pages_contact_title') as string },
-//     { href: '/product', label: t('pages_products_title') as string },
+//     { href: '/product', label: t('pages_product_categories_title') as string },
 //     { href: '/project', label: t('pages_projects_title') as string },
 //   ];
 
@@ -104,7 +104,7 @@ export default function Navbar() {
     { href: '/about', label: t('pages_about_title') as string },
     { href: '/blog', label: t('pages_contact_title') as string },
     { href: '/contact', label: t('pages_contact_title') as string },
-    { href: '/product', label: t('pages_products_title') as string },
+    { href: '/product', label: t('pages_product_categories_title') as string },
     { href: '/project', label: t('pages_projects_title') as string },
   ];
   const linkClass = (href: string) =>

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;
+}

src/components/uikit/icons/phoneIcon.tsx

@@ -7,7 +7,7 @@ export const PhoneIcon = (props: React.SVGProps<SVGSVGElement>) => (
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
   >
-    <g clip-path="url(#clip0_4180_257)">
+    <g clipPath="url(#clip0_4180_257)">
       <path
         d="M21.97 18.33C21.97 18.69 21.89 19.06 21.72 19.42C21.55 19.78 21.33 20.12 21.04 20.44C20.55 20.98 20.01 21.37 19.4 21.62C18.8 21.87 18.15 22 17.45 22C16.43 22 15.34 21.76 14.19 21.27C13.04 20.78 11.89 20.12 10.75 19.29C9.6 18.45 8.51 17.52 7.47 16.49C6.44 15.45 5.51 14.36 4.68 13.22C3.86 12.08 3.2 10.94 2.72 9.81C2.24 8.67 2 7.58 2 6.54C2 5.86 2.12 5.21 2.36 4.61C2.6 4 2.98 3.44 3.51 2.94C4.15 2.31 4.85 2 5.59 2C5.87 2 6.15 2.06 6.4 2.18C6.66 2.3 6.89 2.48 7.07 2.74L9.39 6.01C9.57 6.26 9.7 6.49 9.79 6.71C9.88 6.92 9.93 7.13 9.93 7.32C9.93 7.56 9.86 7.8 9.72 8.03C9.59 8.26 9.4 8.5 9.16 8.74L8.4 9.53C8.29 9.64 8.24 9.77 8.24 9.93C8.24 10.01 8.25 10.08 8.27 10.16C8.3 10.24 8.33 10.3 8.35 10.36C8.53 10.69 8.84 11.12 9.28 11.64C9.73 12.16 10.21 12.69 10.73 13.22C11.27 13.75 11.79 14.24 12.32 14.69C12.84 15.13 13.27 15.43 13.61 15.61C13.66 15.63 13.72 15.66 13.79 15.69C13.87 15.72 13.95 15.73 14.04 15.73C14.21 15.73 14.34 15.67 14.45 15.56L15.21 14.81C15.46 14.56 15.7 14.37 15.93 14.25C16.16 14.11 16.39 14.04 16.64 14.04C16.83 14.04 17.03 14.08 17.25 14.17C17.47 14.26 17.7 14.39 17.95 14.56L21.26 16.91C21.52 17.09 21.7 17.3 21.81 17.55C21.91 17.8 21.97 18.05 21.97 18.33Z"
         stroke="currentColor"