78 lines
2.1 KiB
TypeScript
78 lines
2.1 KiB
TypeScript
'use client';
|
|
|
|
import { useEffect, useState } from 'react';
|
|
import Slideshow from '@/components/Slideshow';
|
|
import CalendarStrip from '@/components/CalendarStrip';
|
|
import MeasuredText from '@/components/MeasuredText';
|
|
import WeatherWidget from '@/components/WeatherWidget';
|
|
import LanguageSwitcher from '@/components/LanguageSwitcher';
|
|
import { t, getLanguage } from '@/lib/i18n';
|
|
|
|
const gold = '#E8A849';
|
|
const navy = '#010D1E';
|
|
const cream = '#f5f0e8';
|
|
|
|
export default function HomePage() {
|
|
const [tagline, setTagline] = useState('Hotel · Restaurant · Andean Highlands');
|
|
|
|
useEffect(() => {
|
|
fetch('/api/site-assets?key=tagline')
|
|
.then((r) => r.json())
|
|
.then((j) => {
|
|
if (j.data) setTagline(j.data);
|
|
})
|
|
.catch(() => {});
|
|
}, []);
|
|
|
|
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,
|
|
}}
|
|
>
|
|
La Huasca
|
|
</h1>
|
|
<p style={{ fontSize: '18px', lineHeight: 1.55, color: 'rgba(245,240,232,0.78)', maxWidth: '52ch', margin: '0 0 2rem' }}>
|
|
{t('common.hotel', getLanguage())} · {t('common.restaurant', getLanguage())} · {t('common.andean_highlands', getLanguage())}
|
|
</p>
|
|
</section>
|
|
|
|
<CalendarStrip />
|
|
</main>
|
|
);
|
|
}
|