feat: add certificate gallery and certifications section components

- Implemented CertificateGallery component to display certification images in a gallery format.
- Created CertificationsSection component to showcase certifications with titles and descriptions.
- Enhanced Gallery component to support animations and keyboard navigation.
- Introduced Select component for dropdown selection with images.
- Added utility functions for API responses and pagination handling.
- Implemented localization functions for text and content.
- Created a custom hook for detecting clicks outside of a component.

src/components/layout/languageSwitch/index.tsx

@@ -2,28 +2,22 @@
 
 import images from '@/assets/images/images';
 import { TLocales } from '@/models/layout';
-import Image from 'next/image';
+import Select from '@/components/uikit/select';
 import { usePathname } from 'next/navigation';
 
+const languages = [
+  { value: 'en', label: 'English', image: images.en },
+  { value: 'fa', label: 'فارسی', image: images.fa },
+];
+
 export default function LanguageSwitch() {
   const pathname = usePathname();
+  const currentLocale = pathname.split('/')[1] as TLocales;
 
-  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];
+  const changeLocale = (locale: string) => {
     if (currentLocale === locale) return;
+
+    document.cookie = `locale=${locale}; path=/; max-age=31536000; samesite=lax`;
     let newPath = pathname.replace(/^\/(en|fa)/, '');
     if (newPath === '/') newPath = '';
 
@@ -31,19 +25,11 @@ export default function LanguageSwitch() {
   };
 
   return (
-    <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>
+    <Select
+      options={languages}
+      value={currentLocale}
+      onChange={changeLocale}
+      size="small"
+    />
   );
 }