feat: add ProjectThumbnail component with category-themed visuals for projects without images

app/components/Projects.tsx

@@ -7,6 +7,7 @@ import Link from "next/link";
 import Image from "next/image";
 import { useLocale, useTranslations } from "next-intl";
 import { Skeleton } from "boneyard-js/react";
+import ProjectThumbnail from "./ProjectThumbnail";
 
 interface Project {
   id: number;
@@ -86,9 +87,13 @@ const Projects = () => {
                       className="object-cover transition-transform duration-700 group-hover:scale-105"
                     />
                   ) : (
-                    <div className="absolute inset-0 flex items-center justify-center bg-gradient-to-br from-stone-100 to-stone-200 dark:from-stone-800 dark:to-stone-900">
-                      <span className="text-4xl font-bold text-stone-300 dark:text-stone-700">{project.title.charAt(0)}</span>
-                    </div>
+                    <ProjectThumbnail
+                      title={project.title}
+                      category={project.category}
+                      tags={project.tags}
+                      slug={project.slug}
+                      size="card"
+                    />
                   )}
                   {/* Overlay on Hover */}
                   <div className="absolute inset-0 bg-black/0 group-hover:bg-black/10 transition-colors duration-500" />