Michilis/Spanglish
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 2 Wiki Activity

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

Browse Source 
- 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
This commit is contained in:
root
2026-01-30 22:45:43 +00:00
parent 47ba754f05
commit d3c69f2936
18 changed files with 461 additions and 351 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
backend/src/lib/emailTemplates.ts
View File

@@ -88,13 +88,9 @@ export const baseEmailWrapper = `
padding: 24px; padding: 24px;
text-align: center; text-align: center;
} }
.header h1 { .header img {
margin: 0; max-height: 40px;
color: #fff; width: auto;
font-size: 24px;
}
.header h1 span {
color: #f4d03f;
} }
.content { .content {
padding: 32px 24px; padding: 32px 24px;
@@ -191,7 +187,7 @@ export const baseEmailWrapper = `
<body> <body>
<div class="container"> <div class="container">
<div class="header"> <div class="header">
<h1>Span<span>glish</span></h1> <img src="{{siteUrl}}/images/logo-spanglish.png" alt="Spanglish" />
</div> </div>
<div class="content"> <div class="content">
{{content}} {{content}}

2
frontend/.env.example
View File

@@ -2,7 +2,7 @@
PORT=3002 PORT=3002
# Site URL (for SEO canonical URLs, sitemap, etc.) # 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) # API URL (leave empty for same-origin proxy)
NEXT_PUBLIC_API_URL= NEXT_PUBLIC_API_URL=

BIN
frontend/public/images/logo-spanglish.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 64 KiB

64
frontend/src/app/(public)/components/AboutSection.tsx Normal file
View File

@@ -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>
);
}

101
frontend/src/app/(public)/components/HeroSection.tsx Normal file
View File

@@ -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>
);
}

46
frontend/src/app/(public)/components/NewsletterForm.tsx Normal file
View File

@@ -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>
);
}

26
frontend/src/app/(public)/components/NewsletterSection.tsx Normal file
View File

@@ -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>
);
}

108
frontend/src/app/(public)/components/NextEventSection.tsx Normal file
View File

@@ -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>
);
}

21
frontend/src/app/(public)/components/NextEventSectionWrapper.tsx Normal file
View File

@@ -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>
);
}

4
frontend/src/app/(public)/contact/page.tsx
View File

@@ -104,7 +104,7 @@ export default function ContactPage() {
<h3 className="font-semibold text-lg">{t('contact.info.email')}</h3> <h3 className="font-semibold text-lg">{t('contact.info.email')}</h3>
<a <a
href={emailLink.url} href={emailLink.url}
className="text-secondary-blue hover:underline" className="text-brand-navy hover:underline"
> >
{emailLink.handle} {emailLink.handle}
</a> </a>
@@ -129,7 +129,7 @@ export default function ContactPage() {
href={link.url} href={link.url}
target="_blank" target="_blank"
rel="noopener noreferrer" 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"> <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]} {socialIcons[link.type]}

34
frontend/src/app/(public)/events/[id]/EventDetailClient.tsx
View File

@@ -2,6 +2,7 @@
import { useState, useEffect } from 'react'; import { useState, useEffect } from 'react';
import Link from 'next/link'; import Link from 'next/link';
import Image from 'next/image';
import { useLanguage } from '@/context/LanguageContext'; import { useLanguage } from '@/context/LanguageContext';
import { eventsApi, Event } from '@/lib/api'; import { eventsApi, Event } from '@/lib/api';
import Card from '@/components/ui/Card'; import Card from '@/components/ui/Card';
@@ -22,6 +23,12 @@ interface EventDetailClientProps {
export default function EventDetailClient({ eventId, initialEvent }: EventDetailClientProps) { export default function EventDetailClient({ eventId, initialEvent }: EventDetailClientProps) {
const { t, locale } = useLanguage(); const { t, locale } = useLanguage();
const [event, setEvent] = useState<Event>(initialEvent); 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 // Refresh event data on client for real-time availability
useEffect(() => { useEffect(() => {
@@ -48,7 +55,8 @@ export default function EventDetailClient({ eventId, initialEvent }: EventDetail
const isSoldOut = event.availableSeats === 0; const isSoldOut = event.availableSeats === 0;
const isCancelled = event.status === 'cancelled'; 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'; const canBook = !isSoldOut && !isCancelled && !isPastEvent && event.status === 'published';
return ( return (
@@ -66,14 +74,20 @@ export default function EventDetailClient({ eventId, initialEvent }: EventDetail
{/* Event Details */} {/* Event Details */}
<div className="lg:col-span-2"> <div className="lg:col-span-2">
<Card className="overflow-hidden"> <Card className="overflow-hidden">
{/* Banner */} {/* Banner - LCP element, loaded with high priority */}
{/* Using unoptimized for backend-served images via /uploads/ rewrite */}
{event.bannerUrl ? ( {event.bannerUrl ? (
<img <div className="relative h-64 w-full">
<Image
src={event.bannerUrl} src={event.bannerUrl}
alt={`${event.title} - Spanglish language exchange event in Asunción`} alt={`${event.title} - Spanglish language exchange event in Asunción`}
className="h-64 w-full object-cover" fill
loading="eager" 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"> <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" /> <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="p-8">
<div className="flex items-start justify-between gap-4"> <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} {locale === 'es' && event.titleEs ? event.titleEs : event.title}
</h1> </h1>
{isCancelled && ( {isCancelled && (
@@ -98,7 +112,7 @@ export default function EventDetailClient({ eventId, initialEvent }: EventDetail
<CalendarIcon className="w-6 h-6 text-primary-yellow flex-shrink-0" /> <CalendarIcon className="w-6 h-6 text-primary-yellow flex-shrink-0" />
<div> <div>
<p className="font-medium">{t('events.details.date')}</p> <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>
</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> <span className="w-6 h-6 flex items-center justify-center text-primary-yellow text-xl">⏰</span>
<div> <div>
<p className="font-medium">{t('events.details.time')}</p> <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>
</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"> <div className="mt-8 pt-8 border-t border-secondary-light-gray">
<h2 className="font-semibold text-lg mb-4">About this event</h2> <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 {locale === 'es' && event.descriptionEs
? event.descriptionEs ? event.descriptionEs
: event.description} : event.description}
@@ -149,7 +163,7 @@ export default function EventDetailClient({ eventId, initialEvent }: EventDetail
</div> </div>
{/* Social Sharing */} {/* 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 <ShareButtons
title={locale === 'es' && event.titleEs ? event.titleEs : event.title} 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)}`} description={`${locale === 'es' ? 'Únete a' : 'Join'} ${locale === 'es' && event.titleEs ? event.titleEs : event.title} - ${formatDate(event.startDatetime)}`}

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

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

309
frontend/src/app/(public)/page.tsx
View File

@@ -1,308 +1,15 @@
'use client'; import HeroSection from './components/HeroSection';
import NextEventSectionWrapper from './components/NextEventSectionWrapper';
import { useState, useEffect } from 'react'; import AboutSection from './components/AboutSection';
import Link from 'next/link'; import NewsletterSection from './components/NewsletterSection';
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';
export default function HomePage() { 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 ( return (
<> <>
{/* Hero Section */} <HeroSection />
<section className="bg-gradient-to-br from-white via-secondary-gray to-white"> <NextEventSectionWrapper />
<div className="container-page py-16 md:py-24"> <AboutSection />
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center"> <NewsletterSection />
<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>
</> </>
); );
} }

2
frontend/src/app/globals.css
View File

@@ -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 base;
@tailwind components; @tailwind components;
@tailwind utilities; @tailwind utilities;

20
frontend/src/app/layout.tsx
View File

@@ -1,10 +1,26 @@
import type { Metadata, Viewport } from 'next'; import type { Metadata, Viewport } from 'next';
import { Inter, Poppins } from 'next/font/google';
import { Toaster } from 'react-hot-toast'; import { Toaster } from 'react-hot-toast';
import { LanguageProvider } from '@/context/LanguageContext'; import { LanguageProvider } from '@/context/LanguageContext';
import { AuthProvider } from '@/context/AuthContext'; import { AuthProvider } from '@/context/AuthContext';
import PlausibleAnalytics from '@/components/PlausibleAnalytics'; import PlausibleAnalytics from '@/components/PlausibleAnalytics';
import './globals.css'; 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'; const siteUrl = process.env.NEXT_PUBLIC_SITE_URL || 'https://spanglish.com.py';
export const metadata: Metadata = { export const metadata: Metadata = {
@@ -94,8 +110,8 @@ export default function RootLayout({
children: React.ReactNode; children: React.ReactNode;
}) { }) {
return ( return (
<html lang="en"> <html lang="en" className={`${inter.variable} ${poppins.variable}`}>
<body> <body className={inter.className}>
<PlausibleAnalytics /> <PlausibleAnalytics />
<AuthProvider> <AuthProvider>
<LanguageProvider> <LanguageProvider>

11
frontend/src/components/layout/Footer.tsx
View File

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

14
frontend/src/components/layout/Header.tsx
View File

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

9
frontend/tailwind.config.js
View File

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