feat: implement event submission flow with image upload and modal interface

app/afrolife/[id]/page.tsx

@@ -5,6 +5,7 @@ import { ArrowLeft, Share2, Play, Calendar, User, Building2, MapPin, ArrowRight
 import { sanitizeHTML } from '../../../lib/sanitize';
 import { prisma } from '../../../lib/prisma';
 import { InterviewType } from '@prisma/client';
+import LightboxImage from '@/components/LightboxImage';
 
 import { Metadata } from 'next';
 
@@ -161,8 +162,12 @@ export default async function AfroLifeDetailPage({ params }: Props) {
                     </div>
                 ) : (
                     <div className="relative h-64 md:h-96 rounded-xl overflow-hidden shadow-lg mb-10">
-                        <img src={item!.thumbnailUrl} alt={item!.title} className="w-full h-full object-cover" />
-                        <div className="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent"></div>
+                        <LightboxImage 
+                            src={item!.thumbnailUrl} 
+                            alt={item!.title} 
+                            position={(item as any).coverPosition || "50% 50%"}
+                            zoom={(item as any).coverZoom || 1}
+                        />
                     </div>
                 )}
 

app/afrolife/page.tsx

@@ -149,7 +149,12 @@ export default async function AfroLifePage({ searchParams }: Props) {
                               <img 
                                   src={item.thumbnailUrl} 
                                   alt={item.title} 
-                                  className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700"
+                                  className="w-full h-full object-cover group-hover:scale-[1.05] transition-transform duration-700"
+                                  style={{ 
+                                    objectPosition: item.coverPosition || '50% 50%',
+                                    transform: `scale(${item.coverZoom || 1})`,
+                                    transformOrigin: item.coverPosition || '50% 50%'
+                                  }}
                               />
                               <div className="absolute inset-0 bg-black/20 group-hover:bg-black/10 transition-colors"></div>