haitham/sitemente
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add lead capture forms to demo pages

Browse Source 
- 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
This commit is contained in:
root
2026-02-19 12:25:34 +00:00
parent 040655912c
commit 245e924530
1 changed files with 195 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/demos/page.tsx
+194 -69
View File
@@ -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<Language>("es");
const [selected, setSelected] = useState<Vertical>("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.");
// 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({ name: "", email: "", phone: "", message: "" });
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() {
</header>
{/* Vertical Selector */}
<section className="py-8 border-b border-white/10">
<section className="py-10 border-b border-white/10 bg-gradient-to-b from-[#1a1625] to-[#2a2235]">
<div className="mx-auto max-w-6xl px-6">
<p className="text-center text-white/50 text-sm mb-4">{t.selectIndustry}</p>
<div className="flex flex-wrap justify-center gap-3">
@@ -301,8 +392,22 @@ export default function DemosPage() {
</div>
</section>
{/* Personalized Demo Banner */}
{businessName && (
<section className="py-6 bg-gradient-to-r from-brand-pink/20 to-purple-500/20 border-b border-brand-pink/30">
<div className="mx-auto max-w-4xl px-6 text-center">
<p className="text-white/80">
🎯 <span className="font-bold text-white">{businessName}</span> - Demo personalizada lista
</p>
<p className="text-sm text-white/60 mt-1">
Habla con nuestra IA como si fuera un cliente preguntando sobre tu negocio
</p>
</div>
</section>
)}
{/* Hero */}
<section className="py-16 md:py-24">
<section className="py-20 md:py-32 bg-gradient-to-b from-[#2a2235] to-[#1a1625]">
<div className="mx-auto max-w-4xl px-6 text-center">
<motion.div variants={fadeUp} initial="hidden" animate="visible" transition={{ duration: 0.6 }}>
<span className="inline-flex items-center gap-2 rounded-full bg-white/10 px-4 py-1 text-sm mb-6">
@@ -345,17 +450,21 @@ export default function DemosPage() {
<motion.div key={plan.name} variants={fadeUp} initial="hidden" animate="visible" transition={{ duration: 0.5, delay: i * 0.1 }} className={`p-6 rounded-2xl border ${plan.popular ? "border-brand-pink bg-brand-pink/10" : "border-white/10 bg-white/5"}`}>
{plan.popular && <span className="text-xs font-medium text-brand-pink">{t.popular}</span>}
<h3 className="text-xl font-bold mt-2">{plan.name}</h3>
<p className="text-3xl font-bold mt-4">{plan.price}<span className="text-sm font-normal text-white/60">/mo</span></p>
<p className="text-3xl font-bold mt-4">{plan.price}<span className="text-sm font-normal text-white/60">{plan.period || "/mes"}</span></p>
{plan.setup && <p className="text-xs text-white/50 mt-1">{plan.setup}</p>}
<ul className="mt-6 space-y-3">
{plan.features.map((f) => (
<li key={f} className="flex items-center gap-2 text-sm text-white/70">
<span className="text-brand-pink">✓</span> {f}
{f}
</li>
))}
</ul>
<button onClick={() => setContactOpen(true)} className={`w-full mt-6 py-3 rounded-lg font-medium transition ${plan.popular ? "bg-brand-pink hover:bg-[#ff7bc0]" : "border border-white/20 hover:bg-white/10"}`}>
{lang === "es" ? "Elegir plan" : "Choose plan"}
</button>
<PaymentButton
planId={`demo-${selected}-${plan.name.toLowerCase().replace("starter", "starter").replace("site", "site").replace("growth", "growth")}`}
planType="monthly"
label={lang === "es" ? "Elegir plan" : "Choose plan"}
variant={plan.popular ? "primary" : "secondary"}
/>
</motion.div>
))}
</div>
@@ -410,6 +519,22 @@ export default function DemosPage() {
<footer className="py-8 border-t border-white/10 text-center text-white/40 text-sm">
<p>{t.footer}</p>
</footer>
{/* Voice AI Widget */}
<SiteMenteVoiceWidget
businessName={businessName || "SiteMente Demo"}
businessType={selected}
/>
</div>
);
}
export default function DemosPage() {
return (
<Suspense fallback={<div className='min-h-screen bg-brand-purple flex items-center justify-center'><div className='text-white text-xl'>Loading...</div></div>}>
<DemosContent />
</Suspense>
);
}