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/components/layout/Footer.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import Link from 'next/link';
+import Image from 'next/image';
 import { useLanguage } from '@/context/LanguageContext';
 import { getSocialLinks, socialIcons } from '@/lib/socialLinks';
 
@@ -22,9 +23,13 @@ export default function Footer() {
           {/* Brand */}
           <div className="col-span-1 md:col-span-2">
             <Link href="/" className="inline-block">
-              <span className="text-2xl font-bold font-heading text-primary-dark">
-                Span<span className="text-primary-yellow">glish</span>
-              </span>
+              <Image
+                src="/images/logo-spanglish.png"
+                alt="Spanglish"
+                width={140}
+                height={40}
+                className="h-10 w-auto"
+              />
             </Link>
             <p className="mt-3 text-gray-600 max-w-md">
               {t('footer.tagline')}