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

app/_ui/ProjectDetailClient.tsx

@@ -6,6 +6,7 @@ import ReactMarkdown from "react-markdown";
 import { useTranslations } from "next-intl";
 import Image from "next/image";
 import { useRouter } from "next/navigation";
+import ProjectThumbnail from "@/app/components/ProjectThumbnail";
 
 export type ProjectDetailData = {
   id: number;
@@ -90,9 +91,13 @@ export default function ProjectDetailClient({
             {project.imageUrl ? (
               <Image src={project.imageUrl} alt={project.title} fill className="object-cover" priority sizes="100vw" />
             ) : (
-              <div className="absolute inset-0 bg-stone-100 dark:bg-stone-800 flex items-center justify-center">
-                <span className="text-[15rem] font-black text-stone-200 dark:text-stone-700">{project.title.charAt(0)}</span>
-              </div>
+              <ProjectThumbnail
+                title={project.title}
+                category={project.category}
+                tags={project.tags}
+                slug={project.slug}
+                size="hero"
+              />
             )}
           </div>
         </div>