304 lines
12 KiB
TypeScript
304 lines
12 KiB
TypeScript
'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';
|
|
|
|
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.26.jpg"
|
|
alt="Language exchange event"
|
|
fill
|
|
sizes="(max-width: 1024px) 50vw, 25vw"
|
|
className="object-cover"
|
|
/>
|
|
<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="Group language practice"
|
|
fill
|
|
sizes="(max-width: 1024px) 50vw, 25vw"
|
|
className="object-cover"
|
|
/>
|
|
</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="Community meetup"
|
|
fill
|
|
sizes="(max-width: 1024px) 50vw, 25vw"
|
|
className="object-cover"
|
|
/>
|
|
</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"
|
|
fill
|
|
sizes="(max-width: 1024px) 50vw, 25vw"
|
|
className="object-cover"
|
|
/>
|
|
<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>
|
|
</>
|
|
);
|
|
}
|