157 lines
7.5 KiB
HTML
157 lines
7.5 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block content %}
|
|
<header class="hero">
|
|
{% if settings.get('hero_video_url') %}
|
|
<video class="hero-video" autoplay muted loop playsinline>
|
|
<source src="{{ settings.get('hero_video_url') }}" type="video/mp4">
|
|
</video>
|
|
{% endif %}
|
|
<div class="hero-overlay"></div>
|
|
<div class="hero-content">
|
|
<h1>{{ 'Descubre Guatemala' if lang == 'es' else 'Discover Guatemala' }}</h1>
|
|
<p>{{ 'La tierra de la eterna primavera, antiguas ruinas mayas y playas de clase mundial.' if lang == 'es' else 'The land of eternal spring, ancient Mayan ruins, and world-class surfing.' }}</p>
|
|
<a href="#contact" class="btn btn-primary">{{ 'Reserva Ahora' if lang == 'es' else 'Book Now' }}</a>
|
|
</div>
|
|
</header>
|
|
|
|
{% if request.args.get("submitted") %}
|
|
<div style="text-align: center; color: var(--primary-color); padding: 1rem; border: 1px solid var(--primary-color); margin: 2rem auto; width: 60%; font-weight: bold;">
|
|
{{ '¡Gracias! Nos pondremos en contacto pronto.' if lang == 'es' else 'Thank you! We will be in touch soon.' }}
|
|
</div>
|
|
{% endif %}
|
|
|
|
<section id="tours">
|
|
<h2 class="section-title">{{ 'Nuestros Tours' if lang == 'es' else 'Our Tours' }}</h2>
|
|
<div class="grid">
|
|
{% for tour in tours %}
|
|
<div class="card glass-panel">
|
|
{% if tour.image_url %}
|
|
<img src="{{ tour.image_url }}" alt="{{ tour.title_en }}" class="card-img">
|
|
{% endif %}
|
|
<div class="card-content">
|
|
<h3>{{ tour.title_es if lang == 'es' else tour.title_en }}</h3>
|
|
<p>{{ tour.desc_es if lang == 'es' else tour.desc_en }}</p>
|
|
<div style="display: flex; justify-content: space-between; align-items: center; margin-top: 1rem;">
|
|
<div class="price">${{ tour.price }}</div>
|
|
<a href="/tour/{{ tour.id }}?lang={{ lang }}" class="btn btn-primary" style="padding: 0.5rem 1rem; font-size: 0.8rem;">{{ 'Detalles' if lang == 'es' else 'Details' }}</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% else %}
|
|
<p style="text-align:center; width:100%;">{{ 'Pronto...' if lang == 'es' else 'Coming soon...' }}</p>
|
|
{% endfor %}
|
|
</div>
|
|
</section>
|
|
|
|
<section id="surf">
|
|
<h2 class="section-title">{{ 'Surf en El Paredón' if lang == 'es' else 'Surf in El Paredón' }}</h2>
|
|
<div class="grid">
|
|
{% for tour in surfs %}
|
|
<div class="card glass-panel">
|
|
{% if tour.image_url %}
|
|
<img src="{{ tour.image_url }}" alt="{{ tour.title_en }}" class="card-img">
|
|
{% endif %}
|
|
<div class="card-content">
|
|
<h3>{{ tour.title_es if lang == 'es' else tour.title_en }}</h3>
|
|
<p>{{ tour.desc_es if lang == 'es' else tour.desc_en }}</p>
|
|
<div style="display: flex; justify-content: space-between; align-items: center; margin-top: 1rem;">
|
|
<div class="price">${{ tour.price }}</div>
|
|
<a href="/tour/{{ tour.id }}?lang={{ lang }}" class="btn btn-primary" style="padding: 0.5rem 1rem; font-size: 0.8rem;">{{ 'Detalles' if lang == 'es' else 'Details' }}</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% else %}
|
|
<p style="text-align:center; width:100%;">{{ 'Pronto...' if lang == 'es' else 'Coming soon...' }}</p>
|
|
{% endfor %}
|
|
</div>
|
|
</section>
|
|
|
|
<section id="volcanoes">
|
|
<h2 class="section-title">{{ 'Volcanes Activos' if lang == 'es' else 'Active Volcanoes' }}</h2>
|
|
<div class="grid">
|
|
{% for tour in volcanoes %}
|
|
<div class="card glass-panel">
|
|
{% if tour.image_url %}
|
|
<img src="{{ tour.image_url }}" alt="{{ tour.title_en }}" class="card-img">
|
|
{% endif %}
|
|
<div class="card-content">
|
|
<h3>{{ tour.title_es if lang == 'es' else tour.title_en }}</h3>
|
|
<p>{{ tour.desc_es if lang == 'es' else tour.desc_en }}</p>
|
|
<div style="display: flex; justify-content: space-between; align-items: center; margin-top: 1rem;">
|
|
<div class="price">${{ tour.price }}</div>
|
|
<a href="/tour/{{ tour.id }}?lang={{ lang }}" class="btn btn-primary" style="padding: 0.5rem 1rem; font-size: 0.8rem;">{{ 'Detalles' if lang == 'es' else 'Details' }}</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% else %}
|
|
<p style="text-align:center; width:100%;">{{ 'Pronto...' if lang == 'es' else 'Coming soon...' }}</p>
|
|
{% endfor %}
|
|
</div>
|
|
</section>
|
|
|
|
<section id="contact" class="contact-section">
|
|
<div class="glass-panel contact-form">
|
|
<h2 style="color: var(--primary-color); margin-bottom: 2rem; font-size: 2rem; text-align: center;">
|
|
{{ 'Comienza tu Viaje' if lang == 'es' else 'Start Your Journey' }}
|
|
</h2>
|
|
<form action="/submit?lang={{ lang }}" method="POST">
|
|
<div class="form-group">
|
|
<label>{{ 'Nombre' if lang == 'es' else 'Full Name' }}</label>
|
|
<input type="text" name="name" class="form-control" required>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label>{{ 'Correo Electrónico' if lang == 'es' else 'Email' }}</label>
|
|
<input type="email" name="email" class="form-control" required>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label>{{ 'Teléfono' if lang == 'es' else 'Phone' }}</label>
|
|
<input type="tel" name="phone" class="form-control" required>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label>{{ 'Interesado en' if lang == 'es' else 'Interested In' }}</label>
|
|
<select name="interested_in" class="form-control">
|
|
<option value="tour">Tours</option>
|
|
<option value="surf">Surf</option>
|
|
<option value="volcano">Volcanoes</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label>{{ 'Mensaje' if lang == 'es' else 'Message' }}</label>
|
|
<textarea name="message" class="form-control" rows="4"></textarea>
|
|
</div>
|
|
|
|
<!-- Checkbox Normal -->
|
|
<label class="checkbox-wrap" style="color: #BBB;">
|
|
<input type="checkbox" required>
|
|
{{ 'Acepto los términos y condiciones' if lang == 'es' else 'I accept the terms and conditions' }}
|
|
</label>
|
|
|
|
<!-- Checkbox Retell AI -->
|
|
{% if settings.get('retell_enabled') == 'true' %}
|
|
<label class="checkbox-wrap" style="color: #BBB;">
|
|
<input type="checkbox" name="wants_retell_ai" value="true">
|
|
{{ 'Hablar con un Agente IA para coordinar' if lang == 'es' else 'Speak with an AI Agent to coordinate' }}
|
|
</label>
|
|
{% endif %}
|
|
|
|
<div class="form-group" style="margin-top: 1rem;">
|
|
{% if turnstile_site_key %}
|
|
<div class="cf-turnstile" data-sitekey="{{ turnstile_site_key }}"></div>
|
|
{% else %}
|
|
<i style="color: #888;">(Cloudflare Turnstile disabled, missing site key)</i>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<button type="submit" class="btn btn-primary" style="width: 100%; border-radius: 8px;">
|
|
{{ 'Enviar Solicitud' if lang == 'es' else 'Submit Request' }}
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</section>
|
|
{% endblock %}
|