feat: compact homepage with CTA buttons, new contact page, remove large text section
This commit is contained in:
+100
-53
@@ -5,6 +5,7 @@ import Slideshow from '@/components/Slideshow';
|
||||
import CalendarStrip from '@/components/CalendarStrip';
|
||||
import WeatherWidget from '@/components/WeatherWidget';
|
||||
import LanguageSwitcher from '@/components/LanguageSwitcher';
|
||||
import Link from 'next/link';
|
||||
import { t, useLanguage } from '@/lib/i18n';
|
||||
|
||||
const gold = '#E8A849';
|
||||
@@ -13,39 +14,21 @@ 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'],
|
||||
tagline: 'Welcome to the Heart of Imbabura',
|
||||
cta_rooms: 'Book a Room',
|
||||
cta_menu: 'View Our Menu',
|
||||
cta_contact: 'Contact Us',
|
||||
},
|
||||
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'],
|
||||
tagline: 'Bienvenidos al Corazón de Imbabura',
|
||||
cta_rooms: 'Reservar Habitación',
|
||||
cta_menu: 'Ver Menú',
|
||||
cta_contact: 'Contáctenos',
|
||||
},
|
||||
} 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 (
|
||||
@@ -57,50 +40,114 @@ export default function HomePage() {
|
||||
|
||||
<Slideshow />
|
||||
|
||||
{/* Compact CTA section */}
|
||||
<section
|
||||
style={{
|
||||
padding: 'clamp(3rem, 9vw, 7rem) 2rem',
|
||||
padding: 'clamp(1.5rem, 4vw, 2.5rem) 2rem',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
textAlign: 'center',
|
||||
gap: '1.5rem',
|
||||
}}
|
||||
>
|
||||
<p
|
||||
style={{
|
||||
fontFamily: 'monospace',
|
||||
fontSize: '12px',
|
||||
fontSize: '11px',
|
||||
letterSpacing: '0.18em',
|
||||
textTransform: 'uppercase',
|
||||
color: gold,
|
||||
margin: '0 0 1rem',
|
||||
margin: 0,
|
||||
}}
|
||||
>
|
||||
{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}
|
||||
{copy.tagline}
|
||||
</p>
|
||||
|
||||
{/* CTA Buttons */}
|
||||
<div style={{ display: 'flex', gap: '1rem', flexWrap: 'wrap', justifyContent: 'center' }}>
|
||||
<Link
|
||||
href="/rooms"
|
||||
style={{
|
||||
display: 'inline-flex',
|
||||
alignItems: 'center',
|
||||
gap: '0.5rem',
|
||||
padding: '0.875rem 1.75rem',
|
||||
background: gold,
|
||||
color: navy,
|
||||
fontWeight: 600,
|
||||
fontSize: '15px',
|
||||
borderRadius: '8px',
|
||||
textDecoration: 'none',
|
||||
transition: 'transform 200ms, box-shadow 200ms',
|
||||
boxShadow: '0 4px 12px rgba(232,168,73,0.25)',
|
||||
}}
|
||||
onMouseEnter={(e) => {
|
||||
e.currentTarget.style.transform = 'translateY(-2px)';
|
||||
e.currentTarget.style.boxShadow = '0 6px 20px rgba(232,168,73,0.35)';
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
e.currentTarget.style.transform = 'translateY(0)';
|
||||
e.currentTarget.style.boxShadow = '0 4px 12px rgba(232,168,73,0.25)';
|
||||
}}
|
||||
>
|
||||
🛏️ {copy.cta_rooms}
|
||||
</Link>
|
||||
<Link
|
||||
href="/menu"
|
||||
style={{
|
||||
display: 'inline-flex',
|
||||
alignItems: 'center',
|
||||
gap: '0.5rem',
|
||||
padding: '0.875rem 1.75rem',
|
||||
background: 'transparent',
|
||||
color: cream,
|
||||
fontWeight: 600,
|
||||
fontSize: '15px',
|
||||
borderRadius: '8px',
|
||||
textDecoration: 'none',
|
||||
border: `2px solid ${gold}`,
|
||||
transition: 'background 200ms, color 200ms',
|
||||
}}
|
||||
onMouseEnter={(e) => {
|
||||
e.currentTarget.style.background = gold;
|
||||
e.currentTarget.style.color = navy;
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
e.currentTarget.style.background = 'transparent';
|
||||
e.currentTarget.style.color = cream;
|
||||
}}
|
||||
>
|
||||
🍽️ {copy.cta_menu}
|
||||
</Link>
|
||||
<Link
|
||||
href="/contact"
|
||||
style={{
|
||||
display: 'inline-flex',
|
||||
alignItems: 'center',
|
||||
gap: '0.5rem',
|
||||
padding: '0.875rem 1.75rem',
|
||||
background: 'transparent',
|
||||
color: 'rgba(245,240,232,0.8)',
|
||||
fontWeight: 600,
|
||||
fontSize: '15px',
|
||||
borderRadius: '8px',
|
||||
textDecoration: 'none',
|
||||
border: '2px solid rgba(245,240,232,0.3)',
|
||||
transition: 'border-color 200ms, color 200ms',
|
||||
}}
|
||||
onMouseEnter={(e) => {
|
||||
e.currentTarget.style.borderColor = 'rgba(245,240,232,0.6)';
|
||||
e.currentTarget.style.color = cream;
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
e.currentTarget.style.borderColor = 'rgba(245,240,232,0.3)';
|
||||
e.currentTarget.style.color = 'rgba(245,240,232,0.8)';
|
||||
}}
|
||||
>
|
||||
✉️ {copy.cta_contact}
|
||||
</Link>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<CalendarStrip />
|
||||
|
||||
Reference in New Issue
Block a user