Horizontal scrolling in mobile mode for projects and blogs and add favicon

2025-06-29 15:46:44 +03:30
parent edaea7e1e0
commit cef9c3bbc1
25 changed files with 313 additions and 125 deletions
@@ -0,0 +1,43 @@
+import Image from 'next/image';
+import Link from 'next/link';
+import Button from '@/components/uikit/button';
+import { useTranslations } from 'next-intl';
+import routeFactory from '@/assets/constants/routeFactory';
+import { IProjectThumbResponseData } from '@/app/api/projects/data';
+import { TLocales } from '@/models/layout';
+
+interface Props {
+  project: IProjectThumbResponseData;
+  locale: TLocales;
+}
+
+const ProjectThumb = ({ project, locale }: Props) => {
+  const t = useTranslations();
+  const routes = routeFactory(t, locale);
+  return (
+    <div className="group flex flex-col gap-3 overflow-hidden bg-white md:gap-5">
+      <div className="relative aspect-[1.4] w-full overflow-hidden rounded-2xl">
+        <Image
+          src={project.imageSrc}
+          alt={project.title}
+          fill
+          className="h-auto w-full object-cover"
+        />
+        <div className="invisible absolute inset-0 flex items-center justify-center bg-black/20 opacity-0 backdrop-blur-xs transition-all group-hover:visible group-hover:opacity-100">
+          <Button endIcon="showMore" link={routes.project.route(project.id)}>
+            {t('com_home_projects_details_CTA')}
+          </Button>
+        </div>
+      </div>
+
+      <Link
+        href={routes.project.route(project.id)}
+        className="group-hover:text-primary mb-4 text-center text-gray-500"
+      >
+        <h2 className="text-base font-medium">{project.title}</h2>
+      </Link>
+    </div>
+  );
+};
+
+export default ProjectThumb;