Add logo image and update branding across header, footer, and emails

- Replace text logo with logo-spanglish.png in Header and Footer
- Update email templates to use logo image instead of styled text
- Add new HeroSection and EventHighlight components
- Update homepage layout and event detail pages
- Adjust Tailwind config and global styles

frontend/src/app/(public)/events/[id]/page.tsx

@@ -46,15 +46,16 @@ export async function generateMetadata({ params }: { params: { id: string } }):
     return { title: 'Event Not Found' };
   }
 
-  const eventDate = new Date(event.startDatetime).toLocaleDateString('en-US', {
-    weekday: 'long',
-    year: 'numeric',
-    month: 'long',
-    day: 'numeric',
-  });
+  const title = event.title;
+  // Use the beginning of the event description, truncated to ~155 chars for SEO
+  const description = event.description.length > 155
+    ? event.description.slice(0, 152).trim() + '...'
+    : event.description;
 
-  const title = `${event.title} – English & Spanish Meetup in Asunción`;
-  const description = `Join Spanglish on ${eventDate} in Asunción. Practice English and Spanish in a relaxed social setting. Limited spots available.`;
+  // Convert relative banner URL to absolute URL for SEO
+  const imageUrl = event.bannerUrl
+    ? (event.bannerUrl.startsWith('http') ? event.bannerUrl : `${siteUrl}${event.bannerUrl}`)
+    : `${siteUrl}/images/og-image.jpg`;
 
   return {
     title,
@@ -64,15 +65,13 @@ export async function generateMetadata({ params }: { params: { id: string } }):
       description,
       type: 'website',
       url: `${siteUrl}/events/${event.id}`,
-      images: event.bannerUrl
-        ? [{ url: event.bannerUrl, width: 1200, height: 630, alt: event.title }]
-        : [{ url: `${siteUrl}/images/og-image.jpg`, width: 1200, height: 630, alt: 'Spanglish Language Exchange Event' }],
+      images: [{ url: imageUrl, width: 1200, height: 630, alt: event.title }],
     },
     twitter: {
       card: 'summary_large_image',
       title,
       description,
-      images: event.bannerUrl ? [event.bannerUrl] : [`${siteUrl}/images/og-image.jpg`],
+      images: [imageUrl],
     },
     alternates: {
       canonical: `${siteUrl}/events/${event.id}`,