Add event thumbnail images to homepage

- Import getAssetUrl function for Directus asset URLs
- Update homepage events section to display thumbnail images
- Images link to events page and show hover effect
- Fallback gracefully when no image is available

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

frontend/src/app/page.tsx

@@ -1,6 +1,6 @@
 import Link from 'next/link';
 import Image from 'next/image';
-import { getArtworks, getEvents, Artwork, Event } from '@/lib/directus';
+import { getArtworks, getEvents, getAssetUrl, Artwork, Event } from '@/lib/directus';
 import { ArtworkCard } from '@/components/artwork-card';
 import { WisdomWordsCarousel } from '@/components/wisdom-words-carousel';
 
@@ -332,7 +332,21 @@ export default async function HomePage() {
           <div className="space-y-8">
             {upcomingEvents.length > 0 ? (
               upcomingEvents.map((event, index) => (
-                <div key={event.id} className={index < upcomingEvents.length - 1 ? 'border-b border-gray-200 pb-8' : 'pb-8'}>
+                <div key={event.id} className={`flex gap-6 ${index < upcomingEvents.length - 1 ? 'border-b border-gray-200 pb-8' : 'pb-8'}`}>
+                  {/* Event Thumbnail */}
+                  {event.image && (
+                    <Link href="/events" className="flex-shrink-0 w-32 h-32 md:w-40 md:h-40 relative bg-gray-100 overflow-hidden group">
+                      <Image
+                        src={getAssetUrl(event.image, { width: 320, quality: 80, format: 'webp' })}
+                        alt={event.title}
+                        fill
+                        className="object-cover transition-transform duration-300 group-hover:scale-105"
+                        sizes="(max-width: 768px) 128px, 160px"
+                      />
+                    </Link>
+                  )}
+                  {/* Event Details */}
+                  <div className="flex-1">
                     <p className="text-sm text-gray-500 uppercase tracking-wider mb-2">
                       {formatEventDate(event.start_date, event.end_date)}
                     </p>
@@ -347,6 +361,7 @@ export default async function HomePage() {
                       Learn More
                     </Link>
                   </div>
+                </div>
               ))
             ) : (
               <p className="text-center text-gray-500 py-8">No upcoming events at the moment.</p>