110 lines
3.0 KiB
TypeScript
110 lines
3.0 KiB
TypeScript
'use client';
|
|
|
|
import { useEffect, useState } from 'react';
|
|
import Slideshow from '@/components/Slideshow';
|
|
import CalendarStrip from '@/components/CalendarStrip';
|
|
import WeatherWidget from '@/components/WeatherWidget';
|
|
import LanguageSwitcher from '@/components/LanguageSwitcher';
|
|
import { t, useLanguage } from '@/lib/i18n';
|
|
|
|
const gold = '#E8A849';
|
|
const navy = '#010D1E';
|
|
const cream = '#f5f0e8';
|
|
|
|
const homeCopy = {
|
|
en: {
|
|
title: 'La Huasca',
|
|
subtitle: 'A mountain retreat with warm hospitality and local flavor.',
|
|
highlights: ['common.hotel', 'common.restaurant', 'common.andean_highlands'],
|
|
},
|
|
es: {
|
|
title: 'La Huasca',
|
|
subtitle: 'Un refugio de montaña con hospitalidad cálida y sabor local.',
|
|
highlights: ['common.hotel', 'common.restaurant', 'common.andean_highlands'],
|
|
},
|
|
} as const;
|
|
|
|
const fallbackTaglineKey = 'common.home_tagline';
|
|
|
|
export default function HomePage() {
|
|
const language = useLanguage();
|
|
const [tagline, setTagline] = useState(t(fallbackTaglineKey, language));
|
|
|
|
useEffect(() => {
|
|
let cancelled = false;
|
|
const fallbackTagline = t(fallbackTaglineKey, language);
|
|
setTagline(fallbackTagline);
|
|
fetch('/api/site-assets?key=tagline')
|
|
.then((r) => r.json())
|
|
.then((j) => {
|
|
if (!cancelled && j.data) setTagline(j.data);
|
|
})
|
|
.catch(() => {});
|
|
|
|
return () => {
|
|
cancelled = true;
|
|
};
|
|
}, [language]);
|
|
|
|
const copy = homeCopy[language];
|
|
|
|
return (
|
|
<main style={{ minHeight: 'calc(100vh - 56px)', background: navy, color: cream }}>
|
|
<LanguageSwitcher />
|
|
<div style={{ position: 'absolute', top: '1rem', right: '1rem', zIndex: 10 }}>
|
|
<WeatherWidget />
|
|
</div>
|
|
|
|
<Slideshow />
|
|
|
|
<section
|
|
style={{
|
|
padding: 'clamp(3rem, 9vw, 7rem) 2rem',
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
alignItems: 'center',
|
|
textAlign: 'center',
|
|
}}
|
|
>
|
|
<p
|
|
style={{
|
|
fontFamily: 'monospace',
|
|
fontSize: '12px',
|
|
letterSpacing: '0.18em',
|
|
textTransform: 'uppercase',
|
|
color: gold,
|
|
margin: '0 0 1rem',
|
|
}}
|
|
>
|
|
{tagline}
|
|
</p>
|
|
<h1
|
|
style={{
|
|
fontSize: 'clamp(44px, 7vw, 84px)',
|
|
fontWeight: 400,
|
|
fontStyle: 'italic',
|
|
lineHeight: 1.08,
|
|
margin: '0 0 1.25rem',
|
|
color: cream,
|
|
}}
|
|
>
|
|
{copy.title}
|
|
</h1>
|
|
<p style={{ fontSize: '18px', lineHeight: 1.55, color: 'rgba(245,240,232,0.78)', maxWidth: '52ch', margin: '0 0 2rem' }}>
|
|
{copy.highlights.map((key, index) => (
|
|
<span key={key}>
|
|
{t(key, language)}
|
|
{index < copy.highlights.length - 1 ? ' · ' : ''}
|
|
</span>
|
|
))}
|
|
</p>
|
|
<p style={{ fontSize: '16px', lineHeight: 1.65, color: 'rgba(245,240,232,0.7)', maxWidth: '58ch', margin: 0 }}>
|
|
{copy.subtitle}
|
|
</p>
|
|
</section>
|
|
|
|
<CalendarStrip />
|
|
</main>
|
|
);
|
|
}
|