feat: Add Docker support and improve API structure

- Introduced Dockerfile and .dockerignore for containerization.
- Removed unused API route `src/app/api/hello/route.ts`.
- Added new API route for fetching products by category.
- Enhanced existing product category API to include descriptions.
- Updated product categories data structure to include descriptions.
- Improved product fetching logic in the product categories page.
- Refactored breadcrumb component for better navigation.
- Added new AchievementIconWhite component for UI consistency.
- Updated Navbar to use routeFactory for better maintainability.
- Enhanced styling in various components for improved responsiveness.
- Removed obsolete language switcher component.

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>