feat: compact homepage with CTA buttons, new contact page, remove large text section
This commit is contained in:
@@ -0,0 +1,194 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import { useLanguage } from '@/lib/i18n';
|
||||
|
||||
const gold = '#E8A849';
|
||||
const navy = '#010D1E';
|
||||
const cream = '#f5f0e8';
|
||||
|
||||
const copy = {
|
||||
en: {
|
||||
title: 'Contact Us',
|
||||
subtitle: 'Get in touch with us',
|
||||
phone: 'Phone',
|
||||
email: 'Email',
|
||||
whatsapp: 'WhatsApp',
|
||||
location: 'Location',
|
||||
address: 'Otavalo, Imbabura, Ecuador',
|
||||
send_message: 'Send us a message',
|
||||
form_name: 'Your Name',
|
||||
form_email: 'Your Email',
|
||||
form_message: 'Message',
|
||||
form_submit: 'Send Message',
|
||||
form_sending: 'Sending...',
|
||||
form_success: 'Message sent successfully!',
|
||||
form_error: 'Failed to send message. Please try again.',
|
||||
},
|
||||
es: {
|
||||
title: 'Contáctenos',
|
||||
subtitle: 'Póngase en contacto con nosotros',
|
||||
phone: 'Teléfono',
|
||||
email: 'Correo',
|
||||
whatsapp: 'WhatsApp',
|
||||
location: 'Ubicación',
|
||||
address: 'Otavalo, Imbabura, Ecuador',
|
||||
send_message: 'Envíenos un mensaje',
|
||||
form_name: 'Su Nombre',
|
||||
form_email: 'Su Correo',
|
||||
form_message: 'Mensaje',
|
||||
form_submit: 'Enviar Mensaje',
|
||||
form_sending: 'Enviando...',
|
||||
form_success: '¡Mensaje enviado exitosamente!',
|
||||
form_error: 'Error al enviar el mensaje. Intente de nuevo.',
|
||||
},
|
||||
};
|
||||
|
||||
export default function ContactPage() {
|
||||
const language = useLanguage();
|
||||
const t = copy[language];
|
||||
const [form, setForm] = useState({ name: '', email: '', message: '' });
|
||||
const [status, setStatus] = useState<'idle' | 'sending' | 'success' | 'error'>('idle');
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setStatus('sending');
|
||||
try {
|
||||
const res = await fetch('/api/contact', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(form),
|
||||
});
|
||||
if (res.ok) {
|
||||
setStatus('success');
|
||||
setForm({ name: '', email: '', message: '' });
|
||||
} else {
|
||||
setStatus('error');
|
||||
}
|
||||
} catch {
|
||||
setStatus('error');
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<main style={{ minHeight: 'calc(100vh - 56px)', background: navy, color: cream, padding: '3rem 2rem' }}>
|
||||
<div style={{ maxWidth: '900px', margin: '0 auto' }}>
|
||||
<h1 style={{ fontSize: 'clamp(32px, 5vw, 48px)', fontWeight: 400, fontStyle: 'italic', marginBottom: '0.5rem', color: cream }}>
|
||||
{t.title}
|
||||
</h1>
|
||||
<p style={{ fontSize: '16px', color: 'rgba(245,240,232,0.7)', marginBottom: '3rem' }}>
|
||||
{t.subtitle}
|
||||
</p>
|
||||
|
||||
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(250px, 1fr))', gap: '2rem', marginBottom: '3rem' }}>
|
||||
{/* Phone */}
|
||||
<div style={{ background: 'rgba(245,240,232,0.06)', borderRadius: '12px', padding: '1.5rem', border: '1px solid rgba(245,240,232,0.12)' }}>
|
||||
<div style={{ fontSize: '24px', marginBottom: '0.5rem' }}>📞</div>
|
||||
<div style={{ fontSize: '12px', textTransform: 'uppercase', letterSpacing: '0.1em', color: gold, marginBottom: '0.25rem' }}>{t.phone}</div>
|
||||
<div style={{ fontSize: '16px' }}>+593 99 XXX XXXX</div>
|
||||
</div>
|
||||
|
||||
{/* Email */}
|
||||
<div style={{ background: 'rgba(245,240,232,0.06)', borderRadius: '12px', padding: '1.5rem', border: '1px solid rgba(245,240,232,0.12)' }}>
|
||||
<div style={{ fontSize: '24px', marginBottom: '0.5rem' }}>✉️</div>
|
||||
<div style={{ fontSize: '12px', textTransform: 'uppercase', letterSpacing: '0.1em', color: gold, marginBottom: '0.25rem' }}>{t.email}</div>
|
||||
<div style={{ fontSize: '16px' }}>info@lahuasca.com</div>
|
||||
</div>
|
||||
|
||||
{/* WhatsApp */}
|
||||
<div style={{ background: 'rgba(245,240,232,0.06)', borderRadius: '12px', padding: '1.5rem', border: '1px solid rgba(245,240,232,0.12)' }}>
|
||||
<div style={{ fontSize: '24px', marginBottom: '0.5rem' }}>💬</div>
|
||||
<div style={{ fontSize: '12px', textTransform: 'uppercase', letterSpacing: '0.1em', color: gold, marginBottom: '0.25rem' }}>{t.whatsapp}</div>
|
||||
<div style={{ fontSize: '16px' }}>+593 99 XXX XXXX</div>
|
||||
</div>
|
||||
|
||||
{/* Location */}
|
||||
<div style={{ background: 'rgba(245,240,232,0.06)', borderRadius: '12px', padding: '1.5rem', border: '1px solid rgba(245,240,232,0.12)' }}>
|
||||
<div style={{ fontSize: '24px', marginBottom: '0.5rem' }}>📍</div>
|
||||
<div style={{ fontSize: '12px', textTransform: 'uppercase', letterSpacing: '0.1em', color: gold, marginBottom: '0.25rem' }}>{t.location}</div>
|
||||
<div style={{ fontSize: '16px' }}>{t.address}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Contact Form */}
|
||||
<div style={{ background: 'rgba(245,240,232,0.04)', borderRadius: '16px', padding: '2rem', border: '1px solid rgba(245,240,232,0.1)' }}>
|
||||
<h2 style={{ fontSize: '20px', fontWeight: 600, marginBottom: '1.5rem', color: cream }}>
|
||||
{t.send_message}
|
||||
</h2>
|
||||
<form onSubmit={handleSubmit} style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
|
||||
<input
|
||||
type="text"
|
||||
placeholder={t.form_name}
|
||||
value={form.name}
|
||||
onChange={(e) => setForm({ ...form, name: e.target.value })}
|
||||
required
|
||||
style={{
|
||||
padding: '0.875rem 1rem',
|
||||
background: 'rgba(245,240,232,0.08)',
|
||||
border: '1px solid rgba(245,240,232,0.2)',
|
||||
borderRadius: '8px',
|
||||
color: cream,
|
||||
fontSize: '15px',
|
||||
}}
|
||||
/>
|
||||
<input
|
||||
type="email"
|
||||
placeholder={t.form_email}
|
||||
value={form.email}
|
||||
onChange={(e) => setForm({ ...form, email: e.target.value })}
|
||||
required
|
||||
style={{
|
||||
padding: '0.875rem 1rem',
|
||||
background: 'rgba(245,240,232,0.08)',
|
||||
border: '1px solid rgba(245,240,232,0.2)',
|
||||
borderRadius: '8px',
|
||||
color: cream,
|
||||
fontSize: '15px',
|
||||
}}
|
||||
/>
|
||||
<textarea
|
||||
placeholder={t.form_message}
|
||||
value={form.message}
|
||||
onChange={(e) => setForm({ ...form, message: e.target.value })}
|
||||
required
|
||||
rows={5}
|
||||
style={{
|
||||
padding: '0.875rem 1rem',
|
||||
background: 'rgba(245,240,232,0.08)',
|
||||
border: '1px solid rgba(245,240,232,0.2)',
|
||||
borderRadius: '8px',
|
||||
color: cream,
|
||||
fontSize: '15px',
|
||||
resize: 'vertical',
|
||||
}}
|
||||
/>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={status === 'sending'}
|
||||
style={{
|
||||
padding: '0.875rem 1.5rem',
|
||||
background: gold,
|
||||
color: navy,
|
||||
border: 'none',
|
||||
borderRadius: '8px',
|
||||
fontSize: '15px',
|
||||
fontWeight: 600,
|
||||
cursor: status === 'sending' ? 'wait' : 'pointer',
|
||||
opacity: status === 'sending' ? 0.7 : 1,
|
||||
transition: 'opacity 200ms',
|
||||
}}
|
||||
>
|
||||
{status === 'sending' ? t.form_sending : t.form_submit}
|
||||
</button>
|
||||
{status === 'success' && (
|
||||
<p style={{ color: '#4CAF50', margin: 0 }}>{t.form_success}</p>
|
||||
)}
|
||||
{status === 'error' && (
|
||||
<p style={{ color: '#f44336', margin: 0 }}>{t.form_error}</p>
|
||||
)}
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user