feat: add product generation and pagination components

- Implemented product generation for categories with a helper function to create 50 products per category.
- Added image assets for English and Persian language support.
- Created a reusable Pagination component for navigating through product lists.
- Developed ProductList component to display products with pagination support.
- Defined TypeScript interfaces for product list props and API response structure.

src/components/layout/languageSwitch/index.tsx

@@ -1,28 +1,49 @@
 'use client';
 
-import Link from 'next/link';
+import images from '@/assets/images/images';
+import { TLocales } from '@/models/layout';
+import Image from 'next/image';
 import { usePathname } from 'next/navigation';
 
 export default function LanguageSwitch() {
   const pathname = usePathname();
 
-  const pathWithoutLocale = pathname.replace(/^\/(en|fa)/, '');
+  const languages = [
+    {
+      title: 'EN',
+      image: images.langEn,
+      locale: 'en',
+    },
+    {
+      title: 'FA',
+      image: images.langFa,
+      locale: 'fa',
+    },
+  ];
+
+  const changeLocale = (locale: TLocales) => {
+    const currentLocale = pathname.split('/')[1];
+    if (currentLocale === locale) return;
+    let newPath = pathname.replace(/^\/(en|fa)/, '');
+    if (newPath === '/') newPath = '';
+
+    window.location.pathname = `/${locale}${newPath}`;
+  };
 
   return (
-    <div className="flex items-center justify-center">
-      <Link
-        href={`/en${pathWithoutLocale === '/' ? '' : pathWithoutLocale}`}
-        className="mx-2 text-gray-800 hover:text-blue-500"
-      >
-        EN
-      </Link>
-      <span className="text-gray-800">|</span>
-      <Link
-        href={`/fa${pathWithoutLocale === '/' ? '' : pathWithoutLocale}`}
-        className="mx-2 text-gray-800 hover:text-blue-500"
-      >
-        FA
-      </Link>
+    <div className="flex items-center justify-center gap-3">
+      {languages.map((language) => (
+        <div
+          className="flex cursor-pointer flex-col items-center justify-center gap-2 px-1"
+          onClick={() => changeLocale(language.locale as TLocales)}
+          key={language.title}
+        >
+          <Image src={language.image} alt={language.title} />
+          <span className="text-xs font-normal text-white">
+            {language.title}
+          </span>
+        </div>
+      ))}
     </div>
   );
 }