From 24ad7ca9d81aed15c2e1b18369b759929cf8f77c Mon Sep 17 00:00:00 2001
From: denshooter <dennis@konkol.net>
Date: Sat, 10 Jan 2026 01:27:51 +0100
Subject: [PATCH] style: apply mesh gradient and texture to project detail page
 fallback

---
 app/projects/[slug]/page.tsx | 32 +++++++++++++++++++++++---------
 1 file changed, 23 insertions(+), 9 deletions(-)

diff --git a/app/projects/[slug]/page.tsx b/app/projects/[slug]/page.tsx
index d5b0930..2f2cd5a 100644
--- a/app/projects/[slug]/page.tsx
+++ b/app/projects/[slug]/page.tsx
@@ -127,16 +127,30 @@ const ProjectDetail = () => {
             className="mb-16 rounded-2xl overflow-hidden shadow-2xl bg-stone-100 aspect-video relative"
         >
              {project.imageUrl ? (
-                <img 
-                    src={project.imageUrl} 
-                    alt={project.title} 
-                    className="w-full h-full object-cover"
-                />
+                <>
+                    <img 
+                        src={project.imageUrl} 
+                        alt={project.title} 
+                        className="w-full h-full object-cover"
+                    />
+                     {/* Texture/Grain Overlay */}
+                    <div className="absolute inset-0 opacity-[0.03] pointer-events-none mix-blend-overlay bg-[url('https://grainy-gradients.vercel.app/noise.svg')]" />
+                </>
              ) : (
-                <div className="absolute inset-0 bg-gradient-to-br from-stone-200 to-stone-300 flex items-center justify-center">
-                    <span className="text-9xl font-serif font-bold text-stone-500/20 select-none">
-                        {project.title.charAt(0)}
-                    </span>
+                <div className="absolute inset-0 bg-stone-200 flex items-center justify-center overflow-hidden">
+                    {/* Mesh Gradient Fallback */}
+                    <div className="absolute inset-0 bg-gradient-to-br from-stone-300 via-stone-200 to-stone-300" />
+                    <div className="absolute top-[-20%] left-[-10%] w-[70%] h-[70%] bg-white/20 rounded-full blur-3xl animate-pulse" />
+                    <div className="absolute bottom-[-10%] right-[-5%] w-[60%] h-[60%] bg-stone-400/10 rounded-full blur-2xl" />
+                    
+                    {/* Texture/Grain Overlay */}
+                    <div className="absolute inset-0 opacity-[0.03] pointer-events-none mix-blend-overlay bg-[url('https://grainy-gradients.vercel.app/noise.svg')]" />
+                    
+                    <div className="relative z-10">
+                        <span className="text-9xl font-serif font-black text-stone-800/10 select-none tracking-tighter">
+                            {project.title.charAt(0)}
+                        </span>
+                    </div>
                 </div>
              )}
         </motion.div>