From 245e9245307895d426c465fe100866e8b6a01620 Mon Sep 17 00:00:00 2001 From: root Date: Thu, 19 Feb 2026 12:25:34 +0000 Subject: [PATCH] feat: add lead capture forms to demo pages - Add business name, contact name fields to form - Add vertical-specific fields (tables for restaurant, properties for real-estate, etc.) - Save leads to localStorage matching CRM schema - Add success message after submission - Wire to existing /leads CRM --- app/demos/page.tsx | 265 +++++++++++++++++++++++++++++++++------------ 1 file changed, 195 insertions(+), 70 deletions(-) diff --git a/app/demos/page.tsx b/app/demos/page.tsx index d68ed48..70d8f3d 100644 --- a/app/demos/page.tsx +++ b/app/demos/page.tsx @@ -1,37 +1,11 @@ "use client"; -import { useState, useEffect, useMemo } from "react"; +import { useState, useEffect, useMemo, Suspense } from "react"; +import { useSearchParams } from "next/navigation"; import Image from "next/image"; import { motion } from "framer-motion"; -import type { Metadata } from "next"; - -// Static metadata for demos page -export const metadata: Metadata = { - title: "Demos | SiteMente - Webs IA para cada industria", - description: - "Ver demos de webs con IA para inmobiliarias, restaurantes, clínicas y servicios del hogar. Precios claros desde €390/mes.", - keywords: [ - "demo web IA España", - "inteligencia artificial inmobiliarias", - "AI restaurantesdemo", - "chatbot clínica", - "IA servicios hogar", - "web con AI Costa del Sol", - ], - openGraph: { - title: "Demos SiteMente | Webs IA por industria", - description: - "Ver demos de webs con IA para cada tipo de negocio. Desde €390/mes.", - url: "https://sitemente.com/demos", - images: [ - { - url: "/og-image.png", - width: 1200, - height: 630, - }, - ], - }, -}; +import PaymentButton from "@/components/stripe/PaymentButton"; +import SiteMenteVoiceWidget from "@/components/SiteMenteVoiceWidget"; type Language = "es" | "en"; type Vertical = "real-estate" | "restaurant" | "clinic" | "home-services"; @@ -44,12 +18,27 @@ const contentByLang = { 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.", + pricingSubtitle: "Cada nivel incluye todo del anterior. Elige el que se adapte a tu negocio.", 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" }, + form: { + title: "Cuéntanos sobre tu negocio", + businessName: "Nombre del negocio", + contactName: "Tu nombre", + email: "Email", + phone: "Teléfono", + message: "Mensaje", + submit: "Pedir mi demo gratis", + close: "Cerrar", + success: "¡Gracias! Tu solicitud de demo ha sido recibida. Te contactaremos en breve.", + // Vertical-specific labels + restaurant: { tables: "¿Cuántas mesas tiene tu restaurante?", hasWebsite: "¿Ya tienes web?", websiteYes: "Sí", websiteNo: "No" }, + realEstate: { properties: "¿Cuántas propiedades gestionas?", location: "¿En qué zona operas?" }, + clinic: { practitioners: "¿Cuántos profesionales trabajan en la clínica?", clinicType: "¿Qué tipo de clínica es?" }, + carRental: { vehicles: "¿Cuántos vehículos tienes?", services: "¿Ofreces servicio de recogida en aeropuerto?" }, + }, footer: "© 2026 SiteMente. Parte de la familia HolaCompi.", }, en: { @@ -59,12 +48,27 @@ const contentByLang = { 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.", + pricingSubtitle: "Each plan includes everything from the previous level. Choose what fits your needs.", 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" }, + form: { + title: "Tell us about your business", + businessName: "Business name", + contactName: "Your name", + email: "Email", + phone: "Phone", + message: "Message", + submit: "Get my free demo", + close: "Close", + success: "Thanks! Your demo request has been received. We'll contact you soon.", + // Vertical-specific labels + restaurant: { tables: "How many tables does your restaurant have?", hasWebsite: "Do you already have a website?", websiteYes: "Yes", websiteNo: "No" }, + realEstate: { properties: "How many properties do you manage?", location: "What area do you operate in?" }, + clinic: { practitioners: "How many practitioners work at your clinic?", clinicType: "What type of clinic is it?" }, + carRental: { vehicles: "How many vehicles do you have?", services: "Do you offer airport pickup service?" }, + }, footer: "© 2026 SiteMente. Part of the HolaCompi family.", }, }; @@ -81,9 +85,9 @@ const verticals = { { title: "Multidioma", desc: "Responde en español, inglés, francés, alemán" }, ], pricing: [ - { name: "Esencial", price: "€390", features: ["1 agente IA especializado", "Web básica profesional", "WhatsApp Business incluido", "Soporte email"] }, - { name: "Profesional", price: "€790", popular: true, features: ["2 agentes IA especializados", "Web completa a medida", "CRM inmobiliario", "Analytics avanzado", "Integraciones MLS"] }, - { name: "Premium", price: "€1390", features: ["Agentes ilimitados", "Web a medida premium", "API integrations", "Soporte 24/7 prioritario", "Gestión multi-oficina"] }, + { name: "Chat IA", price: "€299", period: "/mes", setup: "+€900", features: ["🤖 Empleado IA 24/7", "🌍 Hasta 3 idiomas", "📅 Reservas automáticas", "📊 Dashboard de clientes"] }, + { name: "Chat + Voz", price: "€599", period: "/mes", setup: "+€2.500", popular: true, features: ["✅ Todo de Chat IA", "📞 Contesta llamadas", "🌍 Hasta 5 idiomas", "📅 Sincroniza calendario"] }, + { name: "Empresa IA", price: "€1.499", period: "/mes", setup: "+€5.000", features: ["✅ Todo de Chat + Voz", "🏢 Múltiples ubicaciones", "🔗 CRM completo", "📈 Analytics avanzado"] }, ], }, en: { @@ -96,9 +100,9 @@ const verticals = { { title: "Multilingual", desc: "Responds in Spanish, English, French, German" }, ], pricing: [ - { name: "Essential", price: "€390", features: ["1 specialized AI agent", "Professional basic website", "WhatsApp Business included", "Email support"] }, - { name: "Professional", price: "€790", popular: true, features: ["2 specialized AI agents", "Custom full website", "Real estate CRM", "Advanced analytics", "MLS integrations"] }, - { name: "Premium", price: "€1390", features: ["Unlimited AI agents", "Premium custom website", "API integrations", "Priority 24/7 support", "Multi-office management"] }, + { name: "AI Chat", price: "€299", period: "/month", setup: "+€900", features: ["🤖 AI Employee 24/7", "🌍 2 languages (ES+EN)", "📅 Automated bookings", "📊 Customer dashboard"] }, + { name: "Chat + Voice", price: "€599", period: "/month", setup: "+€2.500", popular: true, features: ["✅ Everything in AI Chat", "📞 Answers calls", "🌍 Up to 5 languages", "📅 Calendar sync"] }, + { name: "AI Company", price: "€1,499", period: "/month", setup: "+€5,000", features: ["✅ Everything in Chat + Voice", "🏢 Multiple locations", "🔗 Full CRM", "📈 Advanced analytics"] }, ], }, }, @@ -113,9 +117,9 @@ const verticals = { { title: "Promociones automáticas", desc: "La IA propone ofertas en momentos bajos" }, ], pricing: [ - { name: "Esencial", price: "€390", features: ["1 agente IA restorantero", "Web básica con menú digital", "WhatsApp Business incluido", "Soporte email"] }, - { name: "Profesional", price: "€790", popular: true, features: ["2 agentes IA especializados", "Web completa con pedidos", "CRM de restaurante", "Gestión de mesas", "Integraciones delivery"] }, - { name: "Premium", price: "€1390", features: ["Agentes ilimitados", "Web a medida premium", "API integrations", "Soporte 24/7 prioritario", "Multi-sucursal"] }, + { name: "Chat IA", price: "€299", period: "/mes", setup: "+€900", features: ["🤖 Empleado IA 24/7", "🌍 Hasta 3 idiomas", "📅 Reservas automáticas", "📊 Dashboard de clientes"] }, + { name: "Chat + Voz", price: "€599", period: "/mes", setup: "+€2.500", popular: true, features: ["✅ Todo de Chat IA", "📞 Contesta llamadas", "🌍 Hasta 5 idiomas", "📅 Sincroniza calendario"] }, + { name: "Empresa IA", price: "€1.499", period: "/mes", setup: "+€5.000", features: ["✅ Todo de Chat + Voz", "🏢 Múltiples ubicaciones", "🔗 CRM completo", "📈 Analytics avanzado"] }, ], }, en: { @@ -128,9 +132,9 @@ const verticals = { { title: "Auto promotions", desc: "AI offers deals during slow periods" }, ], pricing: [ - { name: "Essential", price: "€390", features: ["1 restaurant AI agent", "Basic website with digital menu", "WhatsApp Business included", "Email support"] }, - { name: "Professional", price: "€790", popular: true, features: ["2 specialized AI agents", "Full website with orders", "Restaurant CRM", "Table management", "Delivery integrations"] }, - { name: "Premium", price: "€1390", features: ["Unlimited AI agents", "Premium custom website", "API integrations", "Priority 24/7 support", "Multi-branch"] }, + { name: "AI Chat", price: "€299", period: "/month", setup: "+€900", features: ["🤖 AI Employee 24/7", "🌍 2 languages (ES+EN)", "📅 Automated bookings", "📊 Customer dashboard"] }, + { name: "Chat + Voice", price: "€599", period: "/month", setup: "+€2.500", popular: true, features: ["✅ Everything in AI Chat", "📞 Answers calls", "🌍 Up to 5 languages", "📅 Calendar sync"] }, + { name: "AI Company", price: "€1,499", period: "/month", setup: "+€5,000", features: ["✅ Everything in Chat + Voice", "🏢 Multiple locations", "🔗 Full CRM", "📈 Advanced analytics"] }, ], }, }, @@ -145,9 +149,9 @@ const verticals = { { title: "Cualificación", desc: "Filtra pacientes adecuados para cada tratamiento" }, ], pricing: [ - { name: "Esencial", price: "€390", features: ["1 agente IA médico", "Web básica con servicios", "WhatsApp Business incluido", "Soporte email"] }, - { name: "Profesional", price: "€790", popular: true, features: ["2 agentes IA especializados", "Web completa con citas", "CRM médico", "Recordatorios SMS/WhatsApp", "Integraciones calendarios"] }, - { name: "Premium", price: "€1390", features: ["Agentes ilimitados", "Web a medida premium", "API integrations", "Soporte 24/7 prioritario", "Multi-sede"] }, + { name: "Chat IA", price: "€299", period: "/mes", setup: "+€900", features: ["🤖 Empleado IA 24/7", "🌍 Hasta 3 idiomas", "📅 Reservas automáticas", "📊 Dashboard de clientes"] }, + { name: "Chat + Voz", price: "€599", period: "/mes", setup: "+€2.500", popular: true, features: ["✅ Todo de Chat IA", "📞 Contesta llamadas", "🌍 Hasta 5 idiomas", "📅 Sincroniza calendario"] }, + { name: "Empresa IA", price: "€1.499", period: "/mes", setup: "+€5.000", features: ["✅ Todo de Chat + Voz", "🏢 Múltiples ubicaciones", "🔗 CRM completo", "📈 Analytics avanzado"] }, ], }, en: { @@ -160,9 +164,9 @@ const verticals = { { title: "Qualification", desc: "Filters suitable patients for each treatment" }, ], pricing: [ - { name: "Essential", price: "€390", features: ["1 medical AI agent", "Basic website with services", "WhatsApp Business included", "Email support"] }, - { name: "Professional", price: "€790", popular: true, features: ["2 specialized AI agents", "Full website with bookings", "Medical CRM", "SMS/WhatsApp reminders", "Calendar integrations"] }, - { name: "Premium", price: "€1390", features: ["Unlimited AI agents", "Premium custom website", "API integrations", "Priority 24/7 support", "Multi-location"] }, + { name: "AI Chat", price: "€299", period: "/month", setup: "+€900", features: ["🤖 AI Employee 24/7", "🌍 2 languages (ES+EN)", "📅 Automated bookings", "📊 Customer dashboard"] }, + { name: "Chat + Voice", price: "€599", period: "/month", setup: "+€2.500", popular: true, features: ["✅ Everything in AI Chat", "📞 Answers calls", "🌍 Up to 5 languages", "📅 Calendar sync"] }, + { name: "AI Company", price: "€1,499", period: "/month", setup: "+€5,000", features: ["✅ Everything in Chat + Voice", "🏢 Multiple locations", "🔗 Full CRM", "📈 Advanced analytics"] }, ], }, }, @@ -177,9 +181,9 @@ const verticals = { { title: "Seguimiento", desc: "Recordatorios y seguimiento automático" }, ], pricing: [ - { name: "Esencial", price: "€390", features: ["1 agente IA de servicios", "Web básica con servicios", "WhatsApp Business incluido", "Soporte email"] }, - { name: "Profesional", price: "€790", popular: true, features: ["2 agentes IA especializados", "Web completa con presupuestos", "CRM de servicios", "Gestión de técnicos", "Fotos y proyectos"] }, - { name: "Premium", price: "€1390", features: ["Agentes ilimitados", "Web a medida premium", "API integrations", "Soporte 24/7 prioritario", "Gestión de flota"] }, + { name: "Chat IA", price: "€299", period: "/mes", setup: "+€900", features: ["🤖 Empleado IA 24/7", "🌍 Hasta 3 idiomas", "📅 Reservas automáticas", "📊 Dashboard de clientes"] }, + { name: "Chat + Voz", price: "€599", period: "/mes", setup: "+€2.500", popular: true, features: ["✅ Todo de Chat IA", "📞 Contesta llamadas", "🌍 Hasta 5 idiomas", "📅 Sincroniza calendario"] }, + { name: "Empresa IA", price: "€1.499", period: "/mes", setup: "+€5.000", features: ["✅ Todo de Chat + Voz", "🏢 Múltiples ubicaciones", "🔗 CRM completo", "📈 Analytics avanzado"] }, ], }, en: { @@ -192,9 +196,9 @@ const verticals = { { title: "Follow-up", desc: "Automatic reminders and follow-up" }, ], pricing: [ - { name: "Essential", price: "€390", features: ["1 service AI agent", "Basic website with services", "WhatsApp Business included", "Email support"] }, - { name: "Professional", price: "€790", popular: true, features: ["2 specialized AI agents", "Full website with quotes", "Service CRM", "Technician management", "Photos and projects"] }, - { name: "Premium", price: "€1390", features: ["Unlimited AI agents", "Premium custom website", "API integrations", "Priority 24/7 support", "Fleet management"] }, + { name: "AI Chat", price: "€299", period: "/month", setup: "+€900", features: ["🤖 AI Employee 24/7", "🌍 2 languages (ES+EN)", "📅 Automated bookings", "📊 Customer dashboard"] }, + { name: "Chat + Voice", price: "€599", period: "/month", setup: "+€2.500", popular: true, features: ["✅ Everything in AI Chat", "📞 Answers calls", "🌍 Up to 5 languages", "📅 Calendar sync"] }, + { name: "AI Company", price: "€1,499", period: "/month", setup: "+€5,000", features: ["✅ Everything in Chat + Voice", "🏢 Multiple locations", "🔗 Full CRM", "📈 Advanced analytics"] }, ], }, }, @@ -211,11 +215,40 @@ const verticalIcons = { const fadeUp = { hidden: { opacity: 0, y: 20 }, visible: { opacity: 1, y: 0 } }; -export default function DemosPage() { +function DemosContent() { + const searchParams = useSearchParams(); 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 [formData, setFormData] = useState({ + businessName: "", + contactName: "", + email: "", + phone: "", + message: "", + // Vertical-specific fields + tables: "", + hasWebsite: "", + properties: "", + location: "", + practitioners: "", + clinicType: "", + vehicles: "", + services: "", + }); + const [businessName, setBusinessName] = useState(""); + const [formSubmitted, setFormSubmitted] = useState(false); + + useEffect(() => { + const type = searchParams.get("type"); + const name = searchParams.get("name"); + if (type && ["real-estate", "restaurant", "clinic", "home-services"].includes(type)) { + setSelected(type as Vertical); + } + if (name) { + setBusinessName(decodeURIComponent(name)); + } + }, [searchParams]); const t = contentByLang[lang]; const v = verticals[selected][lang]; @@ -253,9 +286,67 @@ export default function DemosPage() { const handleSubmit = (e: React.FormEvent) => { e.preventDefault(); - alert(lang === "es" ? "¡Gracias! Te contactaremos pronto." : "Thanks! We'll contact you soon."); - setContactOpen(false); - setFormData({ name: "", email: "", phone: "", message: "" }); + + // Create lead object matching the CRM schema from /leads page + const newLead = { + id: `demo-${Date.now()}`, + name: formData.businessName || formData.contactName, + category: selected as "restaurant" | "real-estate" | "clinic" | "car-rental", + phone: formData.phone, + email: formData.email, + website: "", + address: "", + rating: 0, + score: 10, // High score - demo requests are hot leads + notes: buildLeadNotes(formData, selected, t), + status: "new" as const, + lastContact: "", + nextAction: lang === "es" ? "Llamar para demo" : "Call for demo", + createdAt: new Date().toISOString().split("T")[0], + }; + + // Save to localStorage (same as /leads page) + const existingLeads = JSON.parse(localStorage.getItem("sitemente:leads") || "[]"); + const updatedLeads = [newLead, ...existingLeads]; + localStorage.setItem("sitemente:leads", JSON.stringify(updatedLeads)); + + setFormSubmitted(true); + setTimeout(() => { + setContactOpen(false); + setFormData({ + businessName: "", contactName: "", email: "", phone: "", message: "", + tables: "", hasWebsite: "", properties: "", location: "", + practitioners: "", clinicType: "", vehicles: "", services: "" + }); + setFormSubmitted(false); + }, 3000); + }; + + // Build notes string based on vertical-specific fields + const buildLeadNotes = (data: typeof formData, vertical: Vertical, t: typeof contentByLang.es): string => { + const notes: string[] = []; + if (data.message) notes.push(data.message); + + switch (vertical) { + case "restaurant": + if (data.tables) notes.push(`Mesas: ${data.tables}`); + if (data.hasWebsite) notes.push(`Web: ${data.hasWebsite === "yes" ? "Sí" : "No"}`); + break; + case "real-estate": + if (data.properties) notes.push(`Propiedades: ${data.properties}`); + if (data.location) notes.push(`Zona: ${data.location}`); + break; + case "clinic": + if (data.practitioners) notes.push(`Profesionales: ${data.practitioners}`); + if (data.clinicType) notes.push(`Tipo: ${data.clinicType}`); + break; + case "car-rental": + if (data.vehicles) notes.push(`Vehículos: ${data.vehicles}`); + if (data.services) notes.push(`Aeropuerto: ${data.services}`); + break; + } + notes.push("DEMO REQUEST - Alta prioridad"); + return notes.join(" | "); }; return ( @@ -283,7 +374,7 @@ export default function DemosPage() { {/* Vertical Selector */} -
+

{t.selectIndustry}

@@ -301,8 +392,22 @@ export default function DemosPage() {
+ {/* Personalized Demo Banner */} + {businessName && ( +
+
+

+ 🎯 {businessName} - Demo personalizada lista +

+

+ Habla con nuestra IA como si fuera un cliente preguntando sobre tu negocio +

+
+
+ )} + {/* Hero */} -
+
@@ -345,17 +450,21 @@ export default function DemosPage() { {plan.popular && {t.popular}}

{plan.name}

-

{plan.price}/mo

+

{plan.price}{plan.period || "/mes"}

+ {plan.setup &&

{plan.setup}

}
    {plan.features.map((f) => (
  • - ✓ {f} + {f}
    • ))}
- + ))}
@@ -410,6 +519,22 @@ export default function DemosPage() {

{t.footer}

+ + {/* Voice AI Widget */} + ); } + + +export default function DemosPage() { + return ( +
Loading...
}> + + + ); +} +