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>

app/_ui/ProjectsPageClient.tsx

@@ -7,6 +7,7 @@ import Link from "next/link";
 import { useTranslations } from "next-intl";
 import Image from "next/image";
 import { Skeleton } from "../components/ui/Skeleton";
+import ProjectThumbnail from "@/app/components/ProjectThumbnail";
 
 export type ProjectListItem = {
   id: number | string; // Allow both for Directus (string) and Prisma (number) compatibility
@@ -127,10 +128,20 @@ export default function ProjectsPageClient({
             <motion.div key={project.id} initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }}>
               <Link href={`/${locale}/projects/${project.slug}`} className="group block h-full">
                 <div className="bg-white dark:bg-stone-900 rounded-[3rem] p-10 border border-stone-200/60 dark:border-stone-800/60 shadow-sm h-full hover:shadow-xl transition-all flex flex-col">
-                  {project.imageUrl && (
+                  {project.imageUrl ? (
                     <div className="relative aspect-[16/10] rounded-[2rem] overflow-hidden mb-8 border-4 border-stone-50 dark:border-stone-800 shadow-lg">
                       <Image src={project.imageUrl} alt={project.title} fill className="object-cover group-hover:scale-105 transition-transform duration-700" />
                     </div>
+                  ) : (
+                    <div className="relative aspect-[16/10] rounded-[2rem] overflow-hidden mb-8 border-4 border-stone-50 dark:border-stone-800 shadow-lg">
+                      <ProjectThumbnail
+                        title={project.title}
+                        category={project.category}
+                        tags={project.tags}
+                        slug={project.slug}
+                        size="card"
+                      />
+                    </div>
                   )}
                   <div className="flex-1 flex flex-col">
                     <div className="flex justify-between items-start mb-4">