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
2026-01-30 22:45:43 +00:00
parent 47ba754f05
commit d3c69f2936
18 changed files with 461 additions and 351 deletions
--- a/backend/src/lib/emailTemplates.ts
+++ b/backend/src/lib/emailTemplates.ts
@@ -88,13 +88,9 @@ export const baseEmailWrapper = `
      padding: 24px;
      text-align: center;
    }
-    .header h1 {
-      margin: 0;
-      color: #fff;
-      font-size: 24px;
-    }
-    .header h1 span {
-      color: #f4d03f;
+    .header img {
+      max-height: 40px;
+      width: auto;
    }
    .content {
      padding: 32px 24px;
@@ -191,7 +187,7 @@ export const baseEmailWrapper = `
 <body>
  <div class="container">
    <div class="header">
-      <h1>Span<span>glish</span></h1>
+      <img src="{{siteUrl}}/images/logo-spanglish.png" alt="Spanglish" />
    </div>
    <div class="content">
      {{content}}
--- a/frontend/.env.example
+++ b/frontend/.env.example
@@ -2,7 +2,7 @@
 PORT=3002

 # Site URL (for SEO canonical URLs, sitemap, etc.)
-NEXT_PUBLIC_SITE_URL=https://spanglish.com.py
+NEXT_PUBLIC_SITE_URL=https://spanglishcommunity.com

 # API URL (leave empty for same-origin proxy)
 NEXT_PUBLIC_API_URL=
--- a/frontend/public/images/logo-spanglish.png
+++ b/frontend/public/images/logo-spanglish.png
--- a/frontend/src/app/(public)/components/AboutSection.tsx
+++ b/frontend/src/app/(public)/components/AboutSection.tsx
@@ -0,0 +1,64 @@
+'use client';
+
+import { useLanguage } from '@/context/LanguageContext';
+import Card from '@/components/ui/Card';
+import { 
+  CalendarIcon, 
+  ChatBubbleLeftRightIcon,
+  AcademicCapIcon 
+} from '@heroicons/react/24/outline';
+
+export default function AboutSection() {
+  const { t } = useLanguage();
+
+  return (
+    <section className="section-padding bg-secondary-gray">
+      <div className="container-page">
+        <div className="text-center max-w-3xl mx-auto">
+          <h2 className="section-title">{t('home.about.title')}</h2>
+          <p className="section-subtitle">
+            {t('home.about.description')}
+          </p>
+        </div>
+        
+        <div className="mt-16 grid grid-cols-1 md:grid-cols-3 gap-8">
+          <Card className="p-8 text-center card-hover">
+            <div className="w-16 h-16 mx-auto bg-primary-yellow/20 rounded-full flex items-center justify-center">
+              <CalendarIcon className="w-8 h-8 text-primary-dark" />
+            </div>
+            <h3 className="mt-6 text-xl font-semibold">
+              {t('home.about.feature1')}
+            </h3>
+            <p className="mt-3 text-gray-600">
+              {t('home.about.feature1Desc')}
+            </p>
+          </Card>
+          
+          <Card className="p-8 text-center card-hover">
+            <div className="w-16 h-16 mx-auto bg-primary-yellow/20 rounded-full flex items-center justify-center">
+              <ChatBubbleLeftRightIcon className="w-8 h-8 text-primary-dark" />
+            </div>
+            <h3 className="mt-6 text-xl font-semibold">
+              {t('home.about.feature2')}
+            </h3>
+            <p className="mt-3 text-gray-600">
+              {t('home.about.feature2Desc')}
+            </p>
+          </Card>
+          
+          <Card className="p-8 text-center card-hover">
+            <div className="w-16 h-16 mx-auto bg-primary-yellow/20 rounded-full flex items-center justify-center">
+              <AcademicCapIcon className="w-8 h-8 text-primary-dark" />
+            </div>
+            <h3 className="mt-6 text-xl font-semibold">
+              {t('home.about.feature3')}
+            </h3>
+            <p className="mt-3 text-gray-600">
+              {t('home.about.feature3Desc')}
+            </p>
+          </Card>
+        </div>
+      </div>
+    </section>
+  );
+}
--- a/frontend/src/app/(public)/components/HeroSection.tsx
+++ b/frontend/src/app/(public)/components/HeroSection.tsx
@@ -0,0 +1,101 @@
+'use client';
+
+import Link from 'next/link';
+import Image from 'next/image';
+import { useLanguage } from '@/context/LanguageContext';
+import Button from '@/components/ui/Button';
+import { 
+  ChatBubbleLeftRightIcon,
+  UserGroupIcon 
+} from '@heroicons/react/24/outline';
+
+export default function HeroSection() {
+  const { t } = useLanguage();
+
+  return (
+    <section className="bg-gradient-to-br from-white via-secondary-gray to-white">
+      <div className="container-page py-16 md:py-24">
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
+          <div>
+            <h1 className="text-4xl md:text-5xl lg:text-6xl font-bold text-primary-dark leading-tight text-balance">
+              {t('home.hero.title')}
+            </h1>
+            <p className="mt-6 text-xl text-gray-600">
+              {t('home.hero.subtitle')}
+            </p>
+            <div className="mt-8 flex flex-wrap gap-4">
+              <Link href="/events">
+                <Button size="lg">
+                  {t('home.hero.cta')}
+                </Button>
+              </Link>
+              <Link href="/community">
+                <Button variant="outline" size="lg">
+                  {t('common.learnMore')}
+                </Button>
+              </Link>
+            </div>
+          </div>
+          
+          {/* Hero Image Grid */}
+          <div className="relative">
+            <div className="grid grid-cols-2 gap-4">
+                <div className="space-y-4">
+                  <div className="relative rounded-card h-32 flex items-center justify-center overflow-hidden">
+                    <Image
+                      src="/images/2026-01-29 13.10.08.jpg"
+                      alt="Spanglish language exchange social event in Asunción"
+                      fill
+                      sizes="(max-width: 1024px) 50vw, 25vw"
+                      className="object-cover"
+                      priority
+                      fetchPriority="high"
+                    />
+                  <div className="absolute inset-0 bg-primary-yellow/60" />
+                  <ChatBubbleLeftRightIcon className="relative z-10 w-16 h-16 text-primary-dark opacity-50" />
+                </div>
+                <div className="relative rounded-card h-48 overflow-hidden">
+                  <Image
+                    src="/images/2026-01-29 13.10.23.jpg"
+                    alt="English and Spanish language practice session in Asunción"
+                    fill
+                    sizes="(max-width: 1024px) 50vw, 25vw"
+                    className="object-cover"
+                    loading="lazy"
+                  />
+                </div>
+              </div>
+              <div className="space-y-4 pt-8">
+                <div className="relative rounded-card h-48 overflow-hidden">
+                  <Image
+                    src="/images/2026-01-29 13.10.16.jpg"
+                    alt="Spanglish community meetup in Paraguay"
+                    fill
+                    sizes="(max-width: 1024px) 50vw, 25vw"
+                    className="object-cover"
+                    loading="lazy"
+                  />
+                </div>
+                <div className="relative rounded-card h-32 flex items-center justify-center overflow-hidden">
+                  <Image
+                    src="/images/2026-01-29 13.09.59.jpg"
+                    alt="Language exchange group practicing English and Spanish"
+                    fill
+                    sizes="(max-width: 1024px) 50vw, 25vw"
+                    className="object-cover"
+                    loading="lazy"
+                  />
+                  <div className="absolute inset-0 bg-secondary-brown/40" />
+                  <UserGroupIcon className="relative z-10 w-16 h-16 text-secondary-brown opacity-70" />
+                </div>
+              </div>
+            </div>
+            {/* Decorative elements */}
+            <div className="absolute -top-4 -left-4 w-24 h-24 bg-primary-yellow/30 rounded-full blur-2xl" />
+            <div className="absolute -bottom-4 -right-4 w-32 h-32 bg-secondary-blue/20 rounded-full blur-2xl" />
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
--- a/frontend/src/app/(public)/components/NewsletterForm.tsx
+++ b/frontend/src/app/(public)/components/NewsletterForm.tsx
@@ -0,0 +1,46 @@
+'use client';
+
+import { useState } from 'react';
+import { useLanguage } from '@/context/LanguageContext';
+import { contactsApi } from '@/lib/api';
+import Button from '@/components/ui/Button';
+import Input from '@/components/ui/Input';
+import toast from 'react-hot-toast';
+
+export default function NewsletterForm() {
+  const { t } = useLanguage();
+  const [email, setEmail] = useState('');
+  const [subscribing, setSubscribing] = useState(false);
+
+  const handleSubscribe = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!email) return;
+
+    setSubscribing(true);
+    try {
+      await contactsApi.subscribe(email);
+      toast.success(t('home.newsletter.success'));
+      setEmail('');
+    } catch (error) {
+      toast.error(t('home.newsletter.error'));
+    } finally {
+      setSubscribing(false);
+    }
+  };
+
+  return (
+    <form onSubmit={handleSubscribe} className="mt-8 flex flex-col sm:flex-row gap-4 max-w-md mx-auto">
+      <Input
+        type="email"
+        placeholder={t('home.newsletter.placeholder')}
+        value={email}
+        onChange={(e) => setEmail(e.target.value)}
+        className="flex-1 bg-white/10 border-white/20 text-white placeholder:text-gray-400"
+        required
+      />
+      <Button type="submit" isLoading={subscribing}>
+        {t('home.newsletter.button')}
+      </Button>
+    </form>
+  );
+}
--- a/frontend/src/app/(public)/components/NewsletterSection.tsx
+++ b/frontend/src/app/(public)/components/NewsletterSection.tsx
@@ -0,0 +1,26 @@
+'use client';
+
+import { useLanguage } from '@/context/LanguageContext';
+import { SparklesIcon } from '@heroicons/react/24/outline';
+import NewsletterForm from './NewsletterForm';
+
+export default function NewsletterSection() {
+  const { t } = useLanguage();
+
+  return (
+    <section className="section-padding bg-primary-dark text-white">
+      <div className="container-page">
+        <div className="max-w-2xl mx-auto text-center">
+          <SparklesIcon className="w-12 h-12 mx-auto text-primary-yellow" />
+          <h2 className="mt-6 text-3xl md:text-4xl font-bold">
+            {t('home.newsletter.title')}
+          </h2>
+          <p className="mt-4 text-gray-300">
+            {t('home.newsletter.description')}
+          </p>
+          <NewsletterForm />
+        </div>
+      </div>
+    </section>
+  );
+}
--- a/frontend/src/app/(public)/components/NextEventSection.tsx
+++ b/frontend/src/app/(public)/components/NextEventSection.tsx
@@ -0,0 +1,108 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import Link from 'next/link';
+import { useLanguage } from '@/context/LanguageContext';
+import { eventsApi, Event } from '@/lib/api';
+import Button from '@/components/ui/Button';
+import Card from '@/components/ui/Card';
+import { CalendarIcon, MapPinIcon } from '@heroicons/react/24/outline';
+
+export default function NextEventSection() {
+  const { t, locale } = useLanguage();
+  const [nextEvent, setNextEvent] = useState<Event | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    eventsApi.getNextUpcoming()
+      .then(({ event }) => setNextEvent(event))
+      .catch(console.error)
+      .finally(() => setLoading(false));
+  }, []);
+
+  const formatDate = (dateStr: string) => {
+    return new Date(dateStr).toLocaleDateString(locale === 'es' ? 'es-ES' : 'en-US', {
+      weekday: 'long',
+      year: 'numeric',
+      month: 'long',
+      day: 'numeric',
+    });
+  };
+
+  const formatTime = (dateStr: string) => {
+    return new Date(dateStr).toLocaleTimeString(locale === 'es' ? 'es-ES' : 'en-US', {
+      hour: '2-digit',
+      minute: '2-digit',
+    });
+  };
+
+  if (loading) {
+    return (
+      <div className="text-center py-12">
+        <div className="animate-spin w-8 h-8 border-4 border-primary-yellow border-t-transparent rounded-full mx-auto" />
+      </div>
+    );
+  }
+
+  if (!nextEvent) {
+    return (
+      <div className="text-center py-12 text-gray-500">
+        <CalendarIcon className="w-16 h-16 mx-auto mb-4 text-gray-300" />
+        <p className="text-lg">{t('home.nextEvent.noEvents')}</p>
+        <p className="mt-2">{t('home.nextEvent.stayTuned')}</p>
+      </div>
+    );
+  }
+
+  return (
+    <Link href={`/events/${nextEvent.id}`} className="block">
+      <Card variant="elevated" className="p-8 cursor-pointer hover:shadow-lg transition-shadow">
+        <div className="flex flex-col md:flex-row gap-8">
+          <div className="flex-1">
+            <h3 className="text-2xl font-bold text-primary-dark">
+              {locale === 'es' && nextEvent.titleEs ? nextEvent.titleEs : nextEvent.title}
+            </h3>
+            <p className="mt-3 text-gray-600">
+              {locale === 'es' && nextEvent.descriptionEs 
+                ? nextEvent.descriptionEs 
+                : nextEvent.description}
+            </p>
+            
+            <div className="mt-6 space-y-3">
+              <div className="flex items-center gap-3 text-gray-700">
+                <CalendarIcon className="w-5 h-5 text-primary-yellow" />
+                <span>{formatDate(nextEvent.startDatetime)}</span>
+              </div>
+              <div className="flex items-center gap-3 text-gray-700">
+                <span className="w-5 h-5 flex items-center justify-center text-primary-yellow font-bold">
+                  ⏰
+                </span>
+                <span>{formatTime(nextEvent.startDatetime)}</span>
+              </div>
+              <div className="flex items-center gap-3 text-gray-700">
+                <MapPinIcon className="w-5 h-5 text-primary-yellow" />
+                <span>{nextEvent.location}</span>
+              </div>
+            </div>
+          </div>
+          
+          <div className="flex flex-col justify-between items-start md:items-end">
+            <div className="text-right">
+              <span className="text-3xl font-bold text-primary-dark">
+                {nextEvent.price === 0 
+                  ? t('events.details.free')
+                  : `${nextEvent.price.toLocaleString()} ${nextEvent.currency}`}
+              </span>
+              <p className="text-sm text-gray-500 mt-1">
+                {nextEvent.availableSeats} {t('events.details.spotsLeft')}
+              </p>
+            </div>
+            <Button size="lg" className="mt-6">
+              {t('common.moreInfo')}
+            </Button>
+          </div>
+        </div>
+      </Card>
+    </Link>
+  );
+}
--- a/frontend/src/app/(public)/components/NextEventSectionWrapper.tsx
+++ b/frontend/src/app/(public)/components/NextEventSectionWrapper.tsx
@@ -0,0 +1,21 @@
+'use client';
+
+import { useLanguage } from '@/context/LanguageContext';
+import NextEventSection from './NextEventSection';
+
+export default function NextEventSectionWrapper() {
+  const { t } = useLanguage();
+
+  return (
+    <section className="section-padding bg-white">
+      <div className="container-page">
+        <h2 className="section-title text-center">
+          {t('home.nextEvent.title')}
+        </h2>
+        <div className="mt-12 max-w-3xl mx-auto">
+          <NextEventSection />
+        </div>
+      </div>
+    </section>
+  );
+}
--- a/frontend/src/app/(public)/contact/page.tsx
+++ b/frontend/src/app/(public)/contact/page.tsx
@@ -104,7 +104,7 @@ export default function ContactPage() {
                    <h3 className="font-semibold text-lg">{t('contact.info.email')}</h3>
                    <a 
                      href={emailLink.url}
-                      className="text-secondary-blue hover:underline"
+                      className="text-brand-navy hover:underline"
                    >
                      {emailLink.handle}
                    </a>
@@ -129,7 +129,7 @@ export default function ContactPage() {
                          href={link.url}
                          target="_blank"
                          rel="noopener noreferrer"
-                          className="flex items-center gap-3 text-secondary-blue hover:text-primary-dark transition-colors group"
+                          className="flex items-center gap-3 text-brand-navy hover:text-primary-dark transition-colors group"
                        >
                          <span className="w-8 h-8 flex items-center justify-center rounded-full bg-gray-100 group-hover:bg-primary-yellow/20 transition-colors">
                            {socialIcons[link.type]}
--- a/frontend/src/app/(public)/events/[id]/EventDetailClient.tsx
+++ b/frontend/src/app/(public)/events/[id]/EventDetailClient.tsx
@@ -2,6 +2,7 @@

 import { useState, useEffect } from 'react';
 import Link from 'next/link';
+import Image from 'next/image';
 import { useLanguage } from '@/context/LanguageContext';
 import { eventsApi, Event } from '@/lib/api';
 import Card from '@/components/ui/Card';
@@ -22,6 +23,12 @@ interface EventDetailClientProps {
 export default function EventDetailClient({ eventId, initialEvent }: EventDetailClientProps) {
  const { t, locale } = useLanguage();
  const [event, setEvent] = useState<Event>(initialEvent);
+  const [mounted, setMounted] = useState(false);
+
+  // Ensure consistent hydration by only rendering dynamic content after mount
+  useEffect(() => {
+    setMounted(true);
+  }, []);

  // Refresh event data on client for real-time availability
  useEffect(() => {
@@ -48,7 +55,8 @@ export default function EventDetailClient({ eventId, initialEvent }: EventDetail

  const isSoldOut = event.availableSeats === 0;
  const isCancelled = event.status === 'cancelled';
-  const isPastEvent = new Date(event.startDatetime) < new Date();
+  // Only calculate isPastEvent after mount to avoid hydration mismatch
+  const isPastEvent = mounted ? new Date(event.startDatetime) < new Date() : false;
  const canBook = !isSoldOut && !isCancelled && !isPastEvent && event.status === 'published';

  return (
@@ -66,14 +74,20 @@ export default function EventDetailClient({ eventId, initialEvent }: EventDetail
          {/* Event Details */}
          <div className="lg:col-span-2">
            <Card className="overflow-hidden">
-              {/* Banner */}
+              {/* Banner - LCP element, loaded with high priority */}
+              {/* Using unoptimized for backend-served images via /uploads/ rewrite */}
              {event.bannerUrl ? (
-                <img 
-                  src={event.bannerUrl} 
-                  alt={`${event.title} - Spanglish language exchange event in Asunción`}
-                  className="h-64 w-full object-cover"
-                  loading="eager"
-                />
+                <div className="relative h-64 w-full">
+                  <Image 
+                    src={event.bannerUrl} 
+                    alt={`${event.title} - Spanglish language exchange event in Asunción`}
+                    fill
+                    className="object-cover"
+                    sizes="(max-width: 1024px) 100vw, 66vw"
+                    priority
+                    unoptimized
+                  />
+                </div>
              ) : (
                <div className="h-64 bg-gradient-to-br from-primary-yellow/40 to-secondary-blue/30 flex items-center justify-center">
                  <CalendarIcon className="w-24 h-24 text-primary-dark/30" />
@@ -82,7 +96,7 @@ export default function EventDetailClient({ eventId, initialEvent }: EventDetail
              
              <div className="p-8">
                <div className="flex items-start justify-between gap-4">
-                  <h1 className="text-3xl font-bold text-primary-dark">
+                  <h1 className="text-3xl font-bold text-primary-dark" suppressHydrationWarning>
                    {locale === 'es' && event.titleEs ? event.titleEs : event.title}
                  </h1>
                  {isCancelled && (
@@ -98,7 +112,7 @@ export default function EventDetailClient({ eventId, initialEvent }: EventDetail
                    <CalendarIcon className="w-6 h-6 text-primary-yellow flex-shrink-0" />
                    <div>
                      <p className="font-medium">{t('events.details.date')}</p>
-                      <p className="text-gray-600">{formatDate(event.startDatetime)}</p>
+                      <p className="text-gray-600" suppressHydrationWarning>{formatDate(event.startDatetime)}</p>
                    </div>
                  </div>
                  
@@ -106,7 +120,7 @@ export default function EventDetailClient({ eventId, initialEvent }: EventDetail
                    <span className="w-6 h-6 flex items-center justify-center text-primary-yellow text-xl">⏰</span>
                    <div>
                      <p className="font-medium">{t('events.details.time')}</p>
-                      <p className="text-gray-600">{formatTime(event.startDatetime)}</p>
+                      <p className="text-gray-600" suppressHydrationWarning>{formatTime(event.startDatetime)}</p>
                    </div>
                  </div>
                  
@@ -141,7 +155,7 @@ export default function EventDetailClient({ eventId, initialEvent }: EventDetail
                
                <div className="mt-8 pt-8 border-t border-secondary-light-gray">
                  <h2 className="font-semibold text-lg mb-4">About this event</h2>
-                  <p className="text-gray-700 whitespace-pre-line">
+                  <p className="text-gray-700 whitespace-pre-line" suppressHydrationWarning>
                    {locale === 'es' && event.descriptionEs 
                      ? event.descriptionEs 
                      : event.description}
@@ -149,7 +163,7 @@ export default function EventDetailClient({ eventId, initialEvent }: EventDetail
                </div>
                
                {/* Social Sharing */}
-                <div className="mt-8 pt-8 border-t border-secondary-light-gray">
+                <div className="mt-8 pt-8 border-t border-secondary-light-gray" suppressHydrationWarning>
                  <ShareButtons 
                    title={locale === 'es' && event.titleEs ? event.titleEs : event.title}
                    description={`${locale === 'es' ? 'Únete a' : 'Join'} ${locale === 'es' && event.titleEs ? event.titleEs : event.title} - ${formatDate(event.startDatetime)}`}
--- a/frontend/src/app/(public)/events/[id]/page.tsx
+++ b/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}`,
--- a/frontend/src/app/(public)/page.tsx
+++ b/frontend/src/app/(public)/page.tsx
@@ -1,308 +1,15 @@
-'use client';
-
-import { useState, useEffect } from 'react';
-import Link from 'next/link';
-import Image from 'next/image';
-import { useLanguage } from '@/context/LanguageContext';
-import { eventsApi, contactsApi, Event } from '@/lib/api';
-import Button from '@/components/ui/Button';
-import Card from '@/components/ui/Card';
-import Input from '@/components/ui/Input';
-import { 
-  CalendarIcon, 
-  MapPinIcon, 
-  UserGroupIcon,
-  ChatBubbleLeftRightIcon,
-  AcademicCapIcon,
-  SparklesIcon 
-} from '@heroicons/react/24/outline';
-import toast from 'react-hot-toast';
+import HeroSection from './components/HeroSection';
+import NextEventSectionWrapper from './components/NextEventSectionWrapper';
+import AboutSection from './components/AboutSection';
+import NewsletterSection from './components/NewsletterSection';

 export default function HomePage() {
-  const { t, locale } = useLanguage();
-  const [nextEvent, setNextEvent] = useState<Event | null>(null);
-  const [loading, setLoading] = useState(true);
-  const [email, setEmail] = useState('');
-  const [subscribing, setSubscribing] = useState(false);
-
-  useEffect(() => {
-    eventsApi.getNextUpcoming()
-      .then(({ event }) => setNextEvent(event))
-      .catch(console.error)
-      .finally(() => setLoading(false));
-  }, []);
-
-  const handleSubscribe = async (e: React.FormEvent) => {
-    e.preventDefault();
-    if (!email) return;
-
-    setSubscribing(true);
-    try {
-      await contactsApi.subscribe(email);
-      toast.success(t('home.newsletter.success'));
-      setEmail('');
-    } catch (error) {
-      toast.error(t('home.newsletter.error'));
-    } finally {
-      setSubscribing(false);
-    }
-  };
-
-  const formatDate = (dateStr: string) => {
-    return new Date(dateStr).toLocaleDateString(locale === 'es' ? 'es-ES' : 'en-US', {
-      weekday: 'long',
-      year: 'numeric',
-      month: 'long',
-      day: 'numeric',
-    });
-  };
-
-  const formatTime = (dateStr: string) => {
-    return new Date(dateStr).toLocaleTimeString(locale === 'es' ? 'es-ES' : 'en-US', {
-      hour: '2-digit',
-      minute: '2-digit',
-    });
-  };
-
  return (
    <>
-      {/* Hero Section */}
-      <section className="bg-gradient-to-br from-white via-secondary-gray to-white">
-        <div className="container-page py-16 md:py-24">
-          <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
-            <div>
-              <h1 className="text-4xl md:text-5xl lg:text-6xl font-bold text-primary-dark leading-tight text-balance">
-                {t('home.hero.title')}
-              </h1>
-              <p className="mt-6 text-xl text-gray-600">
-                {t('home.hero.subtitle')}
-              </p>
-              <div className="mt-8 flex flex-wrap gap-4">
-                <Link href="/events">
-                  <Button size="lg">
-                    {t('home.hero.cta')}
-                  </Button>
-                </Link>
-                <Link href="/community">
-                  <Button variant="outline" size="lg">
-                    {t('common.learnMore')}
-                  </Button>
-                </Link>
-              </div>
-            </div>
-            
-            {/* Hero Image Grid */}
-            <div className="relative">
-              <div className="grid grid-cols-2 gap-4">
-                  <div className="space-y-4">
-                    <div className="relative rounded-card h-32 flex items-center justify-center overflow-hidden">
-                      <Image
-                        src="/images/2026-01-29 13.10.08.jpg"
-                        alt="Spanglish language exchange social event in Asunción"
-                        fill
-                        sizes="(max-width: 1024px) 50vw, 25vw"
-                        className="object-cover"
-                        loading="eager"
-                        priority
-                      />
-                    <div className="absolute inset-0 bg-primary-yellow/60" />
-                    <ChatBubbleLeftRightIcon className="relative z-10 w-16 h-16 text-primary-dark opacity-50" />
-                  </div>
-                  <div className="relative rounded-card h-48 overflow-hidden">
-                    <Image
-                      src="/images/2026-01-29 13.10.23.jpg"
-                      alt="English and Spanish language practice session in Asunción"
-                      fill
-                      sizes="(max-width: 1024px) 50vw, 25vw"
-                      className="object-cover"
-                      loading="lazy"
-                    />
-                  </div>
-                </div>
-                <div className="space-y-4 pt-8">
-                  <div className="relative rounded-card h-48 overflow-hidden">
-                    <Image
-                      src="/images/2026-01-29 13.10.16.jpg"
-                      alt="Spanglish community meetup in Paraguay"
-                      fill
-                      sizes="(max-width: 1024px) 50vw, 25vw"
-                      className="object-cover"
-                      loading="lazy"
-                    />
-                  </div>
-                  <div className="relative rounded-card h-32 flex items-center justify-center overflow-hidden">
-                    <Image
-                      src="/images/2026-01-29 13.09.59.jpg"
-                      alt="Language exchange group practicing English and Spanish"
-                      fill
-                      sizes="(max-width: 1024px) 50vw, 25vw"
-                      className="object-cover"
-                      loading="lazy"
-                    />
-                    <div className="absolute inset-0 bg-secondary-brown/40" />
-                    <UserGroupIcon className="relative z-10 w-16 h-16 text-secondary-brown opacity-70" />
-                  </div>
-                </div>
-              </div>
-              {/* Decorative elements */}
-              <div className="absolute -top-4 -left-4 w-24 h-24 bg-primary-yellow/30 rounded-full blur-2xl" />
-              <div className="absolute -bottom-4 -right-4 w-32 h-32 bg-secondary-blue/20 rounded-full blur-2xl" />
-            </div>
-          </div>
-        </div>
-      </section>
-
-      {/* Next Event Section */}
-      <section className="section-padding bg-white">
-        <div className="container-page">
-          <h2 className="section-title text-center">
-            {t('home.nextEvent.title')}
-          </h2>
-          
-          <div className="mt-12 max-w-3xl mx-auto">
-            {loading ? (
-              <div className="text-center py-12">
-                <div className="animate-spin w-8 h-8 border-4 border-primary-yellow border-t-transparent rounded-full mx-auto" />
-              </div>
-            ) : nextEvent ? (
-              <Link href={`/events/${nextEvent.id}`} className="block">
-                <Card variant="elevated" className="p-8 cursor-pointer hover:shadow-lg transition-shadow">
-                  <div className="flex flex-col md:flex-row gap-8">
-                    <div className="flex-1">
-                      <h3 className="text-2xl font-bold text-primary-dark">
-                        {locale === 'es' && nextEvent.titleEs ? nextEvent.titleEs : nextEvent.title}
-                      </h3>
-                      <p className="mt-3 text-gray-600">
-                        {locale === 'es' && nextEvent.descriptionEs 
-                          ? nextEvent.descriptionEs 
-                          : nextEvent.description}
-                      </p>
-                      
-                      <div className="mt-6 space-y-3">
-                        <div className="flex items-center gap-3 text-gray-700">
-                          <CalendarIcon className="w-5 h-5 text-primary-yellow" />
-                          <span>{formatDate(nextEvent.startDatetime)}</span>
-                        </div>
-                        <div className="flex items-center gap-3 text-gray-700">
-                          <span className="w-5 h-5 flex items-center justify-center text-primary-yellow font-bold">
-                            ⏰
-                          </span>
-                          <span>{formatTime(nextEvent.startDatetime)}</span>
-                        </div>
-                        <div className="flex items-center gap-3 text-gray-700">
-                          <MapPinIcon className="w-5 h-5 text-primary-yellow" />
-                          <span>{nextEvent.location}</span>
-                        </div>
-                      </div>
-                    </div>
-                    
-                    <div className="flex flex-col justify-between items-start md:items-end">
-                      <div className="text-right">
-                        <span className="text-3xl font-bold text-primary-dark">
-                          {nextEvent.price === 0 
-                            ? t('events.details.free')
-                            : `${nextEvent.price.toLocaleString()} ${nextEvent.currency}`}
-                        </span>
-                        <p className="text-sm text-gray-500 mt-1">
-                          {nextEvent.availableSeats} {t('events.details.spotsLeft')}
-                        </p>
-                      </div>
-                      <Button size="lg" className="mt-6">
-                        {t('common.moreInfo')}
-                      </Button>
-                    </div>
-                  </div>
-                </Card>
-              </Link>
-            ) : (
-              <div className="text-center py-12 text-gray-500">
-                <CalendarIcon className="w-16 h-16 mx-auto mb-4 text-gray-300" />
-                <p className="text-lg">{t('home.nextEvent.noEvents')}</p>
-                <p className="mt-2">{t('home.nextEvent.stayTuned')}</p>
-              </div>
-            )}
-          </div>
-        </div>
-      </section>
-
-      {/* About Section */}
-      <section className="section-padding bg-secondary-gray">
-        <div className="container-page">
-          <div className="text-center max-w-3xl mx-auto">
-            <h2 className="section-title">{t('home.about.title')}</h2>
-            <p className="section-subtitle">
-              {t('home.about.description')}
-            </p>
-          </div>
-          
-          <div className="mt-16 grid grid-cols-1 md:grid-cols-3 gap-8">
-            <Card className="p-8 text-center card-hover">
-              <div className="w-16 h-16 mx-auto bg-primary-yellow/20 rounded-full flex items-center justify-center">
-                <CalendarIcon className="w-8 h-8 text-primary-dark" />
-              </div>
-              <h3 className="mt-6 text-xl font-semibold">
-                {t('home.about.feature1')}
-              </h3>
-              <p className="mt-3 text-gray-600">
-                {t('home.about.feature1Desc')}
-              </p>
-            </Card>
-            
-            <Card className="p-8 text-center card-hover">
-              <div className="w-16 h-16 mx-auto bg-primary-yellow/20 rounded-full flex items-center justify-center">
-                <ChatBubbleLeftRightIcon className="w-8 h-8 text-primary-dark" />
-              </div>
-              <h3 className="mt-6 text-xl font-semibold">
-                {t('home.about.feature2')}
-              </h3>
-              <p className="mt-3 text-gray-600">
-                {t('home.about.feature2Desc')}
-              </p>
-            </Card>
-            
-            <Card className="p-8 text-center card-hover">
-              <div className="w-16 h-16 mx-auto bg-primary-yellow/20 rounded-full flex items-center justify-center">
-                <AcademicCapIcon className="w-8 h-8 text-primary-dark" />
-              </div>
-              <h3 className="mt-6 text-xl font-semibold">
-                {t('home.about.feature3')}
-              </h3>
-              <p className="mt-3 text-gray-600">
-                {t('home.about.feature3Desc')}
-              </p>
-            </Card>
-          </div>
-        </div>
-      </section>
-
-      {/* Newsletter Section */}
-      <section className="section-padding bg-primary-dark text-white">
-        <div className="container-page">
-          <div className="max-w-2xl mx-auto text-center">
-            <SparklesIcon className="w-12 h-12 mx-auto text-primary-yellow" />
-            <h2 className="mt-6 text-3xl md:text-4xl font-bold">
-              {t('home.newsletter.title')}
-            </h2>
-            <p className="mt-4 text-gray-300">
-              {t('home.newsletter.description')}
-            </p>
-            
-            <form onSubmit={handleSubscribe} className="mt-8 flex flex-col sm:flex-row gap-4 max-w-md mx-auto">
-              <Input
-                type="email"
-                placeholder={t('home.newsletter.placeholder')}
-                value={email}
-                onChange={(e) => setEmail(e.target.value)}
-                className="flex-1 bg-white/10 border-white/20 text-white placeholder:text-gray-400"
-                required
-              />
-              <Button type="submit" isLoading={subscribing}>
-                {t('home.newsletter.button')}
-              </Button>
-            </form>
-          </div>
-        </div>
-      </section>
+      <HeroSection />
+      <NextEventSectionWrapper />
+      <AboutSection />
+      <NewsletterSection />
    </>
  );
 }
--- a/frontend/src/app/globals.css
+++ b/frontend/src/app/globals.css
@@ -1,5 +1,3 @@
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Poppins:wght@500;600;700&display=swap');
-
@tailwind base;
@tailwind components;
@tailwind utilities;
--- a/frontend/src/app/layout.tsx
+++ b/frontend/src/app/layout.tsx
@@ -1,10 +1,26 @@
 import type { Metadata, Viewport } from 'next';
+import { Inter, Poppins } from 'next/font/google';
 import { Toaster } from 'react-hot-toast';
 import { LanguageProvider } from '@/context/LanguageContext';
 import { AuthProvider } from '@/context/AuthContext';
 import PlausibleAnalytics from '@/components/PlausibleAnalytics';
 import './globals.css';

+// Self-hosted fonts via next/font - eliminates render-blocking external requests
+const inter = Inter({
+  subsets: ['latin'],
+  display: 'swap',
+  variable: '--font-inter',
+  weight: ['400', '500', '600', '700'],
+});
+
+const poppins = Poppins({
+  subsets: ['latin'],
+  display: 'swap',
+  variable: '--font-poppins',
+  weight: ['500', '600', '700'],
+});
+
 const siteUrl = process.env.NEXT_PUBLIC_SITE_URL || 'https://spanglish.com.py';

 export const metadata: Metadata = {
@@ -94,8 +110,8 @@ export default function RootLayout({
  children: React.ReactNode;
 }) {
  return (
-    <html lang="en">
-      <body>
+    <html lang="en" className={`${inter.variable} ${poppins.variable}`}>
+      <body className={inter.className}>
        <PlausibleAnalytics />
        <AuthProvider>
          <LanguageProvider>
--- a/frontend/src/components/layout/Footer.tsx
+++ b/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')}
--- a/frontend/src/components/layout/Header.tsx
+++ b/frontend/src/components/layout/Header.tsx
@@ -1,6 +1,7 @@
 'use client';

 import Link from 'next/link';
+import Image from 'next/image';
 import { useState } from 'react';
 import { useLanguage } from '@/context/LanguageContext';
 import { useAuth } from '@/context/AuthContext';
@@ -26,10 +27,15 @@ export default function Header() {
      <nav className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="flex items-center justify-between h-16">
          {/* Logo */}
-          <Link href="/" className="flex items-center gap-2">
-            <span className="text-2xl font-bold font-heading text-primary-dark">
-              Span<span className="text-primary-yellow">glish</span>
-            </span>
+          <Link href="/" className="flex items-center">
+            <Image
+              src="/images/logo-spanglish.png"
+              alt="Spanglish"
+              width={140}
+              height={40}
+              className="h-10 w-auto"
+              priority
+            />
          </Link>

          {/* Desktop Navigation */}
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -10,7 +10,7 @@ module.exports = {
      colors: {
        // Brand colors from brand.md
        primary: {
-          yellow: '#FFD84D',
+          yellow: '#FBB82B',
          dark: '#111111',
          white: '#FFFFFF',
        },
@@ -20,10 +20,13 @@ module.exports = {
          blue: '#2F80ED',
          brown: '#6B4A2B',
        },
+        brand: {
+          navy: '#002F44',
+        },
      },
      fontFamily: {
-        sans: ['Inter', 'system-ui', 'sans-serif'],
-        heading: ['Poppins', 'Inter', 'system-ui', 'sans-serif'],
+        sans: ['var(--font-inter)', 'system-ui', 'sans-serif'],
+        heading: ['var(--font-poppins)', 'var(--font-inter)', 'system-ui', 'sans-serif'],
      },
      borderRadius: {
        'btn': '12px',