feat: add cloudinary image upload to project forms, fix project details gallery styling, add gallery preview to project list

components/WorkClient.tsx

@@ -120,6 +120,22 @@ export default function WorkClient({
                 <p className="text-[#7A7470] text-base leading-relaxed mb-8">
                   {study.desc}
                 </p>
+
+                {study.gallery && study.gallery.length > 0 && (
+                  <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-8">
+                    {study.gallery.slice(0, 3).map((src: string, i: number) => (
+                      <div key={i} className="aspect-[16/10] w-full overflow-hidden border border-[#C8C2B8] group-hover:border-[#0A0A0A] bg-[#EDE8E0] transition-colors relative">
+                        <img
+                          src={src}
+                          alt={`${study.title} preview ${i + 1}`}
+                          className="w-full h-full object-contain grayscale group-hover:grayscale-0 contrast-[1.1] brightness-[0.98] group-hover:scale-105 transition-all duration-700"
+                        />
+                        <div className="absolute inset-0 bg-[#0A0A0A]/5 opacity-100 group-hover:opacity-0 transition-opacity duration-300" />
+                      </div>
+                    ))}
+                  </div>
+                )}
+
                 <div className="flex flex-wrap items-center justify-between gap-4 pt-6 border-t border-[#D8D3CA]">
                   <div className="flex flex-wrap gap-2">
                     {(study.tech as string[]).map((t) => (