RUTAS ENCANTADAS DEL TOLIMA #1327
Description
import React, { useState, useEffect } from "react";
// Rutas Encantadas del Tolima - Single-file React landing page component
// - Tailwind CSS classes used (no Tailwind imports here; assume project already configured)
// - Default export is the component
// - Replace logoSrc variable with the uploaded logo path or public URL
const logoSrc = "/assets/logo-rutas-encantadas.png"; // <-- replace with your path, e.g. '/mnt/data/yourlogo.png'
export default function RutasEncantadasLanding() {
const [email, setEmail] = useState("");
const [subscribeMsg, setSubscribeMsg] = useState(null);
const [isOffline, setIsOffline] = useState(false);
useEffect(() => {
function updateOnlineStatus() {
setIsOffline(!navigator.onLine);
}
window.addEventListener("online", updateOnlineStatus);
window.addEventListener("offline", updateOnlineStatus);
updateOnlineStatus();
return () => {
window.removeEventListener("online", updateOnlineStatus);
window.removeEventListener("offline", updateOnlineStatus);
};
}, []);
function handleSubscribe(e) {
e.preventDefault();
if (!email || !email.includes("@")) {
setSubscribeMsg({ type: "error", text: "Ingrese un correo válido." });
return;
}
// Simulate subscription
setSubscribeMsg({ type: "success", text: "Gracias — te enviaremos noticias y novedades." });
setEmail("");
}
return (
Rutas Encantadas del Tolima
Tu guía inteligente, Tolima siempre contigo
Funciones
Rutas
Aliados
Descargar App
☰
<main className="max-w-6xl mx-auto px-6 pt-10 pb-20">
{/* Hero */}
<section className="grid md:grid-cols-2 gap-8 items-center">
<div>
<h2 className="text-4xl md:text-5xl font-extrabold leading-tight">Descubre los tesoros del Tolima, con o sin conexión</h2>
<p className="mt-4 text-lg text-gray-700">Explora las 47 rutas municipales con guías históricas, experiencias de realidad aumentada y recompensas locales. Diseñada para funcionar online y offline.</p>
<div className="mt-6 flex gap-3">
<a href="#download" className="inline-flex items-center gap-2 bg-green-600 text-white px-5 py-3 rounded-lg shadow hover:bg-green-700">Descargar app</a>
<a href="#features" className="inline-flex items-center gap-2 border border-green-200 px-5 py-3 rounded-lg">Ver funciones</a>
</div>
<div className="mt-6 text-sm text-gray-600">
<strong>Offline friendly:</strong> Descarga mapas y rutas para usar sin señal en zonas rurales.
</div>
<div className="mt-8">
<form onSubmit={handleSubscribe} className="flex max-w-md gap-2">
<input type="email" value={email} onChange={e => setEmail(e.target.value)} placeholder="Tu correo para novedades" className="flex-1 px-4 py-3 border rounded-md" />
<button className="bg-green-600 text-white px-4 py-3 rounded-md">Suscribirse</button>
</form>
{subscribeMsg && (
<p className={mt-3 text-sm ${subscribeMsg.type === 'error' ? 'text-red-600' : 'text-green-600'}}>{subscribeMsg.text}</p>
)}
</div>
<div className="mt-6 text-xs text-gray-500">Disponible en Android y iOS. Compatible con dispositivos ARCore/ARKit.</div>
</div>
<div className="bg-white rounded-lg shadow p-4">
<div className="h-80 rounded overflow-hidden bg-gray-100 flex items-center justify-center">
<img src="/assets/tolima-map-sample.jpg" alt="Mapa Tolima" className="object-contain h-full" />
</div>
<div className="mt-4 grid grid-cols-2 gap-3">
<div className="p-3 bg-green-50 rounded">✔ 47 municipios</div>
<div className="p-3 bg-green-50 rounded">✔ AR & offline</div>
<div className="p-3 bg-green-50 rounded">✔ Gamificación</div>
<div className="p-3 bg-green-50 rounded">✔ Mercado local</div>
</div>
</div>
</section>
{/* Features */}
<section id="features" className="mt-16">
<h3 className="text-2xl font-semibold">Funciones principales</h3>
<div className="mt-6 grid md:grid-cols-3 gap-6">
<FeatureCard title="Modo offline" text="Descarga mapas, audios y guías por municipio para usar la app sin señal." />
<FeatureCard title="Realidad Aumentada" text="Vive animaciones y reconstrucciones históricas enfocando puntos de interés." />
<FeatureCard title="Gamificación" text="Completa rutas, gana puntos y canjea descuentos en comercios locales." />
<FeatureCard title="Marketplace" text="Encuentra y reserva hoteles, guías y artesanías del Tolima." />
<FeatureCard title="Rutas temáticas" text="Rutas del café, música, gastronomía y patrimonio." />
<FeatureCard title="Recomendaciones IA" text="Itinerarios personalizados según tus gustos y ubicación." />
</div>
</section>
{/* Rutas sample */}
<section id="rutas" className="mt-16">
<h3 className="text-2xl font-semibold">Rutas destacadas</h3>
<div className="mt-6 grid md:grid-cols-3 gap-6">
<RouteCard name="Ruta del Café" desc="Finca, proceso y degustación" image="/assets/ruta-cafe.jpg" />
<RouteCard name="Ruta Musical" desc="Escenarios y patrimonio sonoro" image="/assets/ruta-musica.jpg" />
<RouteCard name="Ruta Gastronómica" desc="Platos típicos y mercados locales" image="/assets/ruta-gastronomia.jpg" />
</div>
</section>
{/* Partners */}
<section id="partners" className="mt-16">
<h3 className="text-2xl font-semibold">Aliados y comercios</h3>
<p className="mt-2 text-sm text-gray-600">Regístrate como guía, hotel, restaurante o artesano. Promociona tu oferta a turistas interesados.</p>
<div className="mt-6 grid md:grid-cols-3 gap-4">
<PartnerCard name="Hotel El Nevado" city="Ibagué" />
<PartnerCard name="Taller de Sombreros" city="Honda" />
<PartnerCard name="Café Planadas" city="Planadas" />
</div>
</section>
{/* Download / CTA */}
<section id="download" className="mt-16 bg-green-50 p-6 rounded-lg">
<div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
<div>
<h4 className="text-xl font-bold">Descarga la app</h4>
<p className="text-sm text-gray-700">Disponible en Google Play y App Store — funciona offline y con experiencias AR.</p>
</div>
<div className="flex gap-3">
<a className="px-4 py-3 bg-black text-white rounded-md">Google Play</a>
<a className="px-4 py-3 border rounded-md">App Store</a>
</div>
</div>
</section>
{/* Offline warning */}
{isOffline && (
<div className="mt-6 p-3 rounded bg-yellow-100 text-yellow-800 text-sm">Actualmente estás sin conexión - algunas funciones pueden no estar disponibles. Usa la opción de descargas para acceder offline.</div>
)}
{/* FAQ & Footer */}
<section className="mt-16 grid md:grid-cols-2 gap-6">
<div>
<h4 className="text-lg font-semibold">Preguntas frecuentes</h4>
<FAQItem q="¿Funciona sin internet?" a="Sí. Descarga rutas y contenidos para usarlos offline." />
<FAQItem q="¿Cómo canjeo mis recompensas?" a="Acércate a comercios aliados y muestra tu código en la app." />
<FAQItem q="¿Qué dispositivos son compatibles?" a="La app funciona en Android e iOS; RA en dispositivos compatibles con ARCore/ARKit." />
</div>
<div>
<h4 className="text-lg font-semibold">Contacto</h4>
<p className="text-sm text-gray-700">Correo: [email protected]</p>
<p className="text-sm text-gray-700">Plataforma oficial: www.rutasencantadasdelTolima.com (en desarrollo)</p>
</div>
</section>
</main>
<footer className="bg-white/90 border-t py-6 mt-12">
<div className="max-w-6xl mx-auto px-6 text-sm text-gray-600 flex flex-col md:flex-row justify-between">
<div>© {new Date().getFullYear()} Rutas Encantadas del Tolima. Todos los derechos reservados.</div>
<div className="mt-2 md:mt-0">Desarrollado con enfoque offline-first y accesibilidad.</div>
</div>
</footer>
</div>
);
}
function FeatureCard({ title, text }) {
return (
{title}
{text}
);
}
function RouteCard({ name, desc, image }) {
return (
{name}
{desc}
);
}
function PartnerCard({ name, city }) {
return (
);
}
function FAQItem({ q, a }) {
const [open, setOpen] = useState(false);
return (
<button onClick={() => setOpen(s => !s)} className="w-full text-left">
{open &&
);
}