diff --git a/app/demos/page.tsx b/app/demos/page.tsx index 67b56be..014792b 100644 --- a/app/demos/page.tsx +++ b/app/demos/page.tsx @@ -1,117 +1,216 @@ "use client"; -import { useState } from "react"; +import { useState, useEffect } from "react"; import Image from "next/image"; import { motion } from "framer-motion"; +type Language = "es" | "en"; type Vertical = "real-estate" | "restaurant" | "clinic" | "home-services"; +const contentByLang = { + es: { + nav: { features: "Características", pricing: "Precios", contact: "Contacto", cta: "Pedir demo" }, + selectIndustry: "Selecciona tu industria:", + ctaPrimary: "Ver demo en vivo", + ctaSecondary: "Ver características", + featuresTitle: (v: string) => `Características para ${v}`, + pricingTitle: (v: string) => `Planes para ${v}`, + pricingSubtitle: "Precios claros sin sorpresas. Incluye todo lo que necesitas.", + popular: "Más popular", + ctaTitle: "¿Listo para empezar?", + ctaText: "Cuéntanos sobre tu negocio y te mostraremos una demo personalizada.", + ctaButton: "Solicitar demo gratuita", + form: { title: "Cuéntanos sobre tu negocio", name: "Nombre", email: "Email", phone: "Teléfono", message: "Mensaje", submit: "Enviar mensaje", close: "Cerrar" }, + footer: "© 2026 SiteMente. Parte de la familia HolaCompi.", + }, + en: { + nav: { features: "Features", pricing: "Pricing", contact: "Contact", cta: "Get demo" }, + selectIndustry: "Select your industry:", + ctaPrimary: "See live demo", + ctaSecondary: "See features", + featuresTitle: (v: string) => `Features for ${v}`, + pricingTitle: (v: string) => `Plans for ${v}`, + pricingSubtitle: "Clear prices with no surprises. Includes everything you need.", + popular: "Most popular", + ctaTitle: "Ready to get started?", + ctaText: "Tell us about your business and we'll show you a personalized demo.", + ctaButton: "Request free demo", + form: { title: "Tell us about your business", name: "Name", email: "Email", phone: "Phone", message: "Message", submit: "Send message", close: "Close" }, + footer: "© 2026 SiteMente. Part of the HolaCompi family.", + }, +}; + const verticals = { "real-estate": { - id: "real-estate", - name: "Real Estate", - icon: "🏠", - color: "#10b981", - hero: { - badge: "✓ Agentes inmobiliarios en España", - title: "Tu web inmobiliario con IA que vende 24/7", - subtitle: "La IA responde preguntas sobre propiedades, agenda visitas y cualifica leads mientras tú cierras ventas. Especialistas en agencias inmobiliarias en la Costa del Sol.", + es: { + name: "Inmobiliaria", + hero: { badge: "✓ Agentes inmobiliarios en España", title: "Tu web inmobiliario con IA que vende 24/7", subtitle: "La IA responde preguntas sobre propiedades, agenda visitas y cualifica leads mientras tú cierras ventas. Especialistas en agencias inmobiliarias en la Costa del Sol." }, + features: [ + { title: "Búsqueda inteligente", desc: "Los clientes encuentran propiedades con preguntas naturales" }, + { title: "Visitas automáticas", desc: "Agenda visitas sin intervención humana" }, + { title: "Cualificación de leads", desc: "La IA filtra compradores serios de mirones" }, + { title: "Multidioma", desc: "Responde en español, inglés, francés, alemán" }, + ], + pricing: [ + { name: "Esencial", price: "€299", features: ["1 agente IA", "Web básica", "WhatsApp incluido"] }, + { name: "Profesional", price: "€549", popular: true, features: ["2 agentes IA", "Web completa", "CRM integrado", "Analytics"] }, + { name: "Premium", price: "€949", features: ["Agentes ilimitados", "Web a medida", "API integrations", "Soporte 24/7"] }, + ], + }, + en: { + name: "Real Estate", + hero: { badge: "✓ Real estate agents in Spain", title: "Your AI real estate website that sells 24/7", subtitle: "AI answers property questions, schedules viewings, and qualifies leads while you close sales. Specialists in Costa del Sol agencies." }, + features: [ + { title: "Smart search", desc: "Clients find properties with natural questions" }, + { title: "Auto viewings", desc: "Schedule visits without human intervention" }, + { title: "Lead qualification", desc: "AI filters serious buyers from browsers" }, + { title: "Multilingual", desc: "Responds in Spanish, English, French, German" }, + ], + pricing: [ + { name: "Essential", price: "€299", features: ["1 AI agent", "Basic website", "WhatsApp included"] }, + { name: "Professional", price: "€549", popular: true, features: ["2 AI agents", "Full website", "CRM integrated", "Analytics"] }, + { name: "Premium", price: "€949", features: ["Unlimited AI agents", "Custom website", "API integrations", "24/7 Support"] }, + ], }, - features: [ - { title: "Búsqueda inteligente", desc: "Los clientes encuentran propiedades con preguntas naturales" }, - { title: "Visitas automáticas", desc: "Agenda visitas sin intervención humana" }, - { title: "Cualificación de leads", desc: "La IA filtra compradores serios de mirones" }, - { title: "Multidioma", desc: "Responde en español, inglés, francés, alemán" }, - ], - pricing: [ - { name: "Esencial", price: "€299", features: ["1 agente IA", "Web básica", "WhatsApp incluido"] }, - { name: "Profesional", price: "€549", popular: true, features: ["2 agentes IA", "Web completa", "CRM integrado", "Analytics"] }, - { name: "Premium", price: "€949", features: ["Agentes ilimitados", "Web a medida", "API integrations", "Soporte 24/7"] }, - ], }, "restaurant": { - id: "restaurant", - name: "Restaurante", - icon: "🍽️", - color: "#f59e0b", - hero: { - badge: "✓ Restaurantes en España", - title: "Tu restaurante abierto 24 horas", - subtitle: "Toma reservas a las 3 AM, responde sobre alérgenos y sugiere platos. La IA maneja todo el atención al cliente mientras tú disfrutas de tu negocio.", + es: { + name: "Restaurante", + hero: { badge: "✓ Restaurantes en España", title: "Tu restaurante abierto 24 horas", subtitle: "Toma reservas a las 3 AM, responde sobre alérgenos y sugiere platos. La IA maneja toda la atención al cliente mientras tú disfrutas de tu negocio." }, + features: [ + { title: "Reservas 24/7", desc: "Reservas automáticas sin llamar" }, + { title: "Menú interactivo", desc: "Clientes preguntan sobre platos y alérgenos" }, + { title: "Pedidos online", desc: "Carrito de pedidos integrado" }, + { title: "Promociones automáticas", desc: "La IA propone ofertas en momentos bajos" }, + ], + pricing: [ + { name: "Inicio", price: "€199", features: ["1 agente IA", "Web básica", "Reservas"] }, + { name: "Negocio", price: "€399", popular: true, features: ["2 agentes IA", "Web completa", "Pedidos", "CRM"] }, + { name: "Cadena", price: "€749", features: ["Agentes ilimitados", "Multi-sucursal", "API integrations", "Soporte 24/7"] }, + ], + }, + en: { + name: "Restaurant", + hero: { badge: "✓ Restaurants in Spain", title: "Your restaurant open 24 hours", subtitle: "Take reservations at 3 AM, answer about allergens and suggest dishes. AI handles all customer service while you enjoy your business." }, + features: [ + { title: "24/7 Reservations", desc: "Automated bookings without calling" }, + { title: "Interactive menu", desc: "Clients ask about dishes and allergens" }, + { title: "Online orders", desc: "Integrated ordering cart" }, + { title: "Auto promotions", desc: "AI offers deals during slow periods" }, + ], + pricing: [ + { name: "Starter", price: "€199", features: ["1 AI agent", "Basic website", "Reservations"] }, + { name: "Business", price: "€399", popular: true, features: ["2 AI agents", "Full website", "Orders", "CRM"] }, + { name: "Chain", price: "€749", features: ["Unlimited agents", "Multi-branch", "API integrations", "24/7 Support"] }, + ], }, - features: [ - { title: "Reservas 24/7", desc: "Reservas automáticas sin llamar" }, - { title: "Menú interactivo", desc: "Clientes preguntan sobre platos y alérgenos" }, - { title: "Pedidos online", desc: "Carrito de pedidos integrado" }, - { title: "Promociones automáticas", desc: "La IA предложа ofertas en momentos bajos" }, - ], - pricing: [ - { name: "Inicio", price: "€199", features: ["1 agente IA", "Web básica", "Reservas"] }, - { name: "Negocio", price: "€399", popular: true, features: ["2 agentes IA", "Web completa", "Pedidos", " CRM"] }, - { name: "Cadena", price: "€749", features: ["Agentes ilimitados", "Multi-sucursal", "API integrations", "Soporte 24/7"] }, - ], }, "clinic": { - id: "clinic", - name: "Clínica", - icon: "⚕️", - color: "#06b6d4", - hero: { - badge: "✓ Clínicas estéticas y médicas", - title: "Tu clínica siempre disponible", - subtitle: "La IA agenda citas, responde sobre tratamientos y recuerda citas. Libera a tu equipo para lo que importa: cuidar pacientes.", + es: { + name: "Clínica", + hero: { badge: "✓ Clínicas estéticas y médicas", title: "Tu clínica siempre disponible", subtitle: "La IA agenda citas, responde sobre tratamientos y recuerda citas. Libera a tu equipo para lo que importa: cuidar pacientes." }, + features: [ + { title: "Citas automáticas", desc: "Agenda 24/7 sin receptionist" }, + { title: "Info de tratamientos", desc: "Responde sobre procedimientos y precios" }, + { title: "Recordatorios", desc: "La IA recuerda citas y seguimiento" }, + { title: "Cualificación", desc: "Filtra pacientes adecuados para cada tratamiento" }, + ], + pricing: [ + { name: "Básico", price: "€249", features: ["1 agente IA", "Web básica", "Citas"] }, + { name: "Clínica", price: "€499", popular: true, features: ["2 agentes IA", "Web completa", "CRM médico", "Recordatorios"] }, + { name: "Grupo", price: "€899", features: ["Agentes ilimitados", "Multi-sede", "API integrations", "Soporte 24/7"] }, + ], + }, + en: { + name: "Clinic", + hero: { badge: "✓ Aesthetic and medical clinics", title: "Your clinic always available", subtitle: "AI schedules appointments, answers about treatments and remembers appointments. Free your team for what matters: patient care." }, + features: [ + { title: "Auto appointments", desc: "Schedule 24/7 without receptionist" }, + { title: "Treatment info", desc: "Answers about procedures and prices" }, + { title: "Reminders", desc: "AI remembers appointments and follow-ups" }, + { title: "Qualification", desc: "Filters suitable patients for each treatment" }, + ], + pricing: [ + { name: "Basic", price: "€249", features: ["1 AI agent", "Basic website", "Appointments"] }, + { name: "Clinic", price: "€499", popular: true, features: ["2 AI agents", "Full website", "Medical CRM", "Reminders"] }, + { name: "Group", price: "€899", features: ["Unlimited agents", "Multi-location", "API integrations", "24/7 Support"] }, + ], }, - features: [ - { title: "Citas automáticas", desc: "Agenda 24/7 sin receptionist" }, - { title: "Info de tratamientos", desc: "Responde sobre procedimientos y precios" }, - { title: "Recordatorios", desc: "La IA recuerda citas y seguimiento" }, - { title: "Cualificación", desc: "Filtra pacientes adecuados para cada tratamiento" }, - ], - pricing: [ - { name: "Básico", price: "€249", features: ["1 agente IA", "Web básica", "Citas"] }, - { name: "Clínica", price: "€499", popular: true, features: ["2 agentes IA", "Web completa", "CRM médico", "Recordatorios"] }, - { name: "Grupo", price: "€899", features: ["Agentes ilimitados", "Multi-sede", "API integrations", "Soporte 24/7"] }, - ], }, "home-services": { - id: "home-services", - name: "Servicios del Hogar", - icon: "🔧", - color: "#8b5cf6", - hero: { - badge: "✓ Fontaneros, electricistas, piscinas", - title: "Tu empresa de servicios siempre operativa", - subtitle: "La IA responde emergencias, agenda servicios y quotea presupuestos. Nunca pierdas un cliente por no estar disponible.", + es: { + name: "Servicios del Hogar", + hero: { badge: "✓ Fontaneros, electricistas, piscinas", title: "Tu empresa de servicios siempre operativa", subtitle: "La IA responde emergencias, agenda servicios y quotea presupuestos. Nunca pierdas un cliente por no estar disponible." }, + features: [ + { title: "Emergencias 24/7", desc: "Responde siempre, incluso a las 2 AM" }, + { title: "Presupuestos rápidos", desc: "La IA genera presupuestos preliminares" }, + { title: "Agenda inteligente", desc: "Coordina citas con disponibilidad real" }, + { title: "Seguimiento", desc: "Recordatorios y seguimiento automático" }, + ], + pricing: [ + { name: "Profesional", price: "€249", features: ["1 agente IA", "Web básica", "Presupuestos"] }, + { name: "Empresa", price: "€449", popular: true, features: ["2 agentes IA", "Web completa", "CRM servicios", "Fotos/proyectos"] }, + { name: "Corporativo", price: "€849", features: ["Agentes ilimitados", "Flota/varios equipos", "API integrations", "Soporte 24/7"] }, + ], + }, + en: { + name: "Home Services", + hero: { badge: "✓ Plumbers, electricians, pools", title: "Your service company always operational", subtitle: "AI answers emergencies, schedules services and quotes jobs. Never lose a customer due to unavailability." }, + features: [ + { title: "24/7 Emergencies", desc: "Always responds, even at 2 AM" }, + { title: "Fast quotes", desc: "AI generates preliminary quotes" }, + { title: "Smart scheduling", desc: "Coordinates appointments with real availability" }, + { title: "Follow-up", desc: "Automatic reminders and follow-up" }, + ], + pricing: [ + { name: "Professional", price: "€249", features: ["1 AI agent", "Basic website", "Quotes"] }, + { name: "Company", price: "€449", popular: true, features: ["2 AI agents", "Full website", "Service CRM", "Photos/projects"] }, + { name: "Corporate", price: "€849", features: ["Unlimited agents", "Fleet/multi-team", "API integrations", "24/7 Support"] }, + ], }, - features: [ - { title: "Emergencias 24/7", desc: "Responde siempre, incluso a las 2 AM" }, - { title: "Presupuestos rápidos", desc: "La IA genera presupuestos preliminares" }, - { title: "Agenda inteligente", desc: "Coordina citas con disponibilidad real" }, - { title: "Seguimiento", desc: "Recordatorios y seguimiento automático" }, - ], - pricing: [ - { name: "Profesional", price: "€249", features: ["1 agente IA", "Web básica", "Presupuestos"] }, - { name: "Empresa", price: "€449", popular: true, features: ["2 agentes IA", "Web completa", "CRM servicios", "Fotos/proyectos"] }, - { name: "Corporativo", price: "€849", features: ["Agentes ilimitados", "Flota/varios equipos", "API integrations", "Soporte 24/7"] }, - ], }, }; -const fadeUp = { - hidden: { opacity: 0, y: 20 }, - visible: { opacity: 1, y: 0 }, +const verticalNames = { + es: { "real-estate": "Inmobiliaria", restaurant: "Restaurante", clinic: "Clínica", "home-services": "Servicios del Hogar" }, + en: { "real-estate": "Real Estate", restaurant: "Restaurant", clinic: "Clinic", "home-services": "Home Services" }, }; +const verticalIcons = { + "real-estate": "🏠", restaurant: "🍽️", clinic: "⚕️", "home-services": "🔧" +}; + +const fadeUp = { hidden: { opacity: 0, y: 20 }, visible: { opacity: 1, y: 0 } }; + export default function DemosPage() { + const [lang, setLang] = useState("es"); const [selected, setSelected] = useState("real-estate"); const [contactOpen, setContactOpen] = useState(false); const [formData, setFormData] = useState({ name: "", email: "", phone: "", message: "" }); - const v = verticals[selected]; + const t = contentByLang[lang]; + const v = verticals[selected][lang]; + const vName = verticalNames[lang][selected]; + + useEffect(() => { + if (typeof window === "undefined") return; + const saved = localStorage.getItem("sitemente:lang"); + if (saved === "es" || saved === "en") { + setLang(saved); + return; + } + const browserLang = navigator.language.toLowerCase(); + setLang(browserLang.startsWith("en") ? "en" : "es"); + }, []); + + useEffect(() => { + if (typeof window === "undefined") return; + localStorage.setItem("sitemente:lang", lang); + }, [lang]); const handleSubmit = (e: React.FormEvent) => { e.preventDefault(); - alert("¡Gracias! Te contactaremos pronto."); + alert(lang === "es" ? "¡Gracias! Te contactaremos pronto." : "Thanks! We'll contact you soon."); setContactOpen(false); setFormData({ name: "", email: "", phone: "", message: "" }); }; @@ -125,35 +224,34 @@ export default function DemosPage() { SiteMente SiteMente - - setContactOpen(true)} className="px-4 py-2 bg-brand-pink rounded-lg text-sm font-medium hover:bg-[#ff7bc0] transition"> - Pedir demo - +
+ +
+ + +
+ setContactOpen(true)} className="px-4 py-2 bg-brand-pink rounded-lg text-sm font-medium hover:bg-[#ff7bc0] transition">{t.nav.cta} +
{/* Vertical Selector */}
-

Selecciona tu industria:

+

{t.selectIndustry}

- {(Object.keys(verticals) as Vertical[]).map((key) => ( + {(["real-estate", "restaurant", "clinic", "home-services"] as Vertical[]).map((key) => ( ))}
@@ -171,12 +269,8 @@ export default function DemosPage() {

{v.hero.title}

{v.hero.subtitle}

- - - Ver características - + + {t.ctaSecondary}
@@ -185,17 +279,10 @@ export default function DemosPage() { {/* Features */}
-

Características para {v.name}

+

{t.featuresTitle(vName)}

{v.features.map((feature, i) => ( - +
✨

{feature.title}

{feature.desc}

@@ -208,21 +295,14 @@ export default function DemosPage() { {/* Pricing */}
-

Planes para {v.name}

-

Precios claros sin sorpresas. Incluye todo lo que necesitas.

+

{t.pricingTitle(vName)}

+

{t.pricingSubtitle}

{v.pricing.map((plan, i) => ( - - {plan.popular && Más popular} + + {plan.popular && {t.popular}}

{plan.name}

-

{plan.price}/mes

+

{plan.price}/mo

    {plan.features.map((f) => (
  • @@ -231,7 +311,7 @@ export default function DemosPage() { ))}
))} @@ -242,11 +322,9 @@ export default function DemosPage() { {/* CTA */}
-

¿Listo para empezar?

-

Cuéntanos sobre tu negocio y te mostraremos una demo personalizada.

- +

{t.ctaTitle}

+

{t.ctaText}

+
@@ -257,29 +335,29 @@ export default function DemosPage() {
-

Contacto

-

Cuéntanos sobre tu negocio

+

{lang === "es" ? "Contacto" : "Contact"}

+

{t.form.title}

- - setFormData({...formData, name: e.target.value})} className="w-full mt-1 px-4 py-2 rounded-lg bg-white/10 border border-white/20 text-white placeholder-white/40 focus:outline-none focus:border-brand-pink" placeholder="Tu nombre" /> + + setFormData({...formData, name: e.target.value})} className="w-full mt-1 px-4 py-2 rounded-lg bg-white/10 border border-white/20 text-white placeholder-white/40 focus:outline-none focus:border-brand-pink" placeholder={lang === "es" ? "Tu nombre" : "Your name"} />
- + setFormData({...formData, email: e.target.value})} className="w-full mt-1 px-4 py-2 rounded-lg bg-white/10 border border-white/20 text-white placeholder-white/40 focus:outline-none focus:border-brand-pink" placeholder="tu@email.com" />
- + setFormData({...formData, phone: e.target.value})} className="w-full mt-1 px-4 py-2 rounded-lg bg-white/10 border border-white/20 text-white placeholder-white/40 focus:outline-none focus:border-brand-pink" placeholder="+34 600 000 000" />
- -