root
295 lines
15 KiB
TypeScript
295 lines
15 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import Image from "next/image";
|
|
import { motion } from "framer-motion";
|
|
|
|
type Vertical = "real-estate" | "restaurant" | "clinic" | "home-services";
|
|
|
|
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.",
|
|
},
|
|
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.",
|
|
},
|
|
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.",
|
|
},
|
|
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.",
|
|
},
|
|
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 },
|
|
};
|
|
|
|
export default function DemosPage() {
|
|
const [selected, setSelected] = useState<Vertical>("real-estate");
|
|
const [contactOpen, setContactOpen] = useState(false);
|
|
const [formData, setFormData] = useState({ name: "", email: "", phone: "", message: "" });
|
|
|
|
const v = verticals[selected];
|
|
|
|
const handleSubmit = (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
alert("¡Gracias! Te contactaremos pronto.");
|
|
setContactOpen(false);
|
|
setFormData({ name: "", email: "", phone: "", message: "" });
|
|
};
|
|
|
|
return (
|
|
<div className="min-h-screen bg-[#1a1625] text-white">
|
|
{/* Header */}
|
|
<header className="border-b border-white/10 bg-[#1a1625]/90 backdrop-blur sticky top-0 z-50">
|
|
<div className="mx-auto flex w-full max-w-6xl items-center justify-between px-6 py-4">
|
|
<a href="/" className="flex items-center gap-3">
|
|
<Image src="/sitemente-logo-light.png" alt="SiteMente" width={40} height={40} className="h-10 w-auto" />
|
|
<span className="font-bold text-xl">SiteMente</span>
|
|
</a>
|
|
<nav className="hidden md:flex items-center gap-6 text-sm font-medium">
|
|
<a href="#features" className="hover:text-brand-pink transition">Características</a>
|
|
<a href="#pricing" className="hover:text-brand-pink transition">Precios</a>
|
|
<a href="#contact" className="hover:text-brand-pink transition">Contacto</a>
|
|
</nav>
|
|
<a href="#contact" onClick={() => setContactOpen(true)} className="px-4 py-2 bg-brand-pink rounded-lg text-sm font-medium hover:bg-[#ff7bc0] transition">
|
|
Pedir demo
|
|
</a>
|
|
</div>
|
|
</header>
|
|
|
|
{/* Vertical Selector */}
|
|
<section className="py-8 border-b border-white/10">
|
|
<div className="mx-auto max-w-6xl px-6">
|
|
<p className="text-center text-white/50 text-sm mb-4">Selecciona tu industria:</p>
|
|
<div className="flex flex-wrap justify-center gap-3">
|
|
{(Object.keys(verticals) as Vertical[]).map((key) => (
|
|
<button
|
|
key={key}
|
|
onClick={() => setSelected(key)}
|
|
className={`flex items-center gap-2 px-4 py-2 rounded-full border transition ${
|
|
selected === key
|
|
? `bg-${verticals[key].color}/20 border-${verticals[key].color} text-white`
|
|
: "border-white/20 text-white/70 hover:border-white/40"
|
|
}`}
|
|
style={{ backgroundColor: selected === key ? `${verticals[key].color}20` : undefined }}
|
|
>
|
|
<span>{verticals[key].icon}</span>
|
|
<span className="font-medium">{verticals[key].name}</span>
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Hero */}
|
|
<section className="py-16 md:py-24">
|
|
<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">
|
|
<span className="w-2 h-2 rounded-full bg-brand-pink" />
|
|
{v.hero.badge}
|
|
</span>
|
|
<h1 className="text-4xl md:text-5xl font-bold mb-4">{v.hero.title}</h1>
|
|
<p className="text-lg text-white/70 mb-8">{v.hero.subtitle}</p>
|
|
<div className="flex flex-wrap justify-center gap-4">
|
|
<button onClick={() => setContactOpen(true)} className="px-6 py-3 bg-brand-pink rounded-lg font-semibold hover:bg-[#ff7bc0] transition">
|
|
Ver demo en vivo
|
|
</button>
|
|
<a href="#features" className="px-6 py-3 border border-white/20 rounded-lg font-semibold hover:bg-white/10 transition">
|
|
Ver características
|
|
</a>
|
|
</div>
|
|
</motion.div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Features */}
|
|
<section id="features" className="py-16 border-t border-white/10">
|
|
<div className="mx-auto max-w-6xl px-6">
|
|
<h2 className="text-3xl font-bold text-center mb-12">Características para {v.name}</h2>
|
|
<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
|
|
{v.features.map((feature, i) => (
|
|
<motion.div
|
|
key={feature.title}
|
|
variants={fadeUp}
|
|
initial="hidden"
|
|
animate="visible"
|
|
transition={{ duration: 0.5, delay: i * 0.1 }}
|
|
className="p-6 rounded-xl border border-white/10 bg-white/5 hover:border-white/20 transition"
|
|
>
|
|
<div className="w-12 h-12 rounded-lg bg-brand-pink/20 flex items-center justify-center text-2xl mb-4">✨</div>
|
|
<h3 className="font-semibold mb-2">{feature.title}</h3>
|
|
<p className="text-sm text-white/60">{feature.desc}</p>
|
|
</motion.div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Pricing */}
|
|
<section id="pricing" className="py-16 border-t border-white/10 bg-white/5">
|
|
<div className="mx-auto max-w-6xl px-6">
|
|
<h2 className="text-3xl font-bold text-center mb-4">Planes para {v.name}</h2>
|
|
<p className="text-center text-white/60 mb-12">Precios claros sin sorpresas. Incluye todo lo que necesitas.</p>
|
|
<div className="grid md:grid-cols-3 gap-6 max-w-5xl mx-auto">
|
|
{v.pricing.map((plan, i) => (
|
|
<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">Más 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">/mes</span></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}
|
|
</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"}`}>
|
|
Elegir plan
|
|
</button>
|
|
</motion.div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* CTA */}
|
|
<section id="contact" className="py-16 border-t border-white/10">
|
|
<div className="mx-auto max-w-2xl px-6 text-center">
|
|
<h2 className="text-3xl font-bold mb-4">¿Listo para empezar?</h2>
|
|
<p className="text-white/60 mb-8">Cuéntanos sobre tu negocio y te mostraremos una demo personalizada.</p>
|
|
<button onClick={() => setContactOpen(true)} className="px-8 py-3 bg-brand-pink rounded-lg font-semibold hover:bg-[#ff7bc0] transition">
|
|
Solicitar demo gratuita
|
|
</button>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Contact Modal */}
|
|
{contactOpen && (
|
|
<div className="fixed inset-0 z-50 flex items-center justify-center px-4">
|
|
<div className="absolute inset-0 bg-black/60 backdrop-blur-sm" onClick={() => setContactOpen(false)} />
|
|
<motion.div initial={{ opacity: 0, scale: 0.95 }} animate={{ opacity: 1, scale: 1 }} className="relative z-10 w-full max-w-lg rounded-2xl border border-white/20 bg-[#1a1625] p-8">
|
|
<div className="flex items-start justify-between mb-6">
|
|
<div>
|
|
<p className="text-sm uppercase tracking-widest text-white/50">Contacto</p>
|
|
<h3 className="text-xl font-bold mt-1">Cuéntanos sobre tu negocio</h3>
|
|
</div>
|
|
<button onClick={() => setContactOpen(false)} className="text-white/50 hover:text-white">✕</button>
|
|
</div>
|
|
<form onSubmit={handleSubmit} className="space-y-4">
|
|
<div>
|
|
<label className="text-sm text-white/70">Nombre</label>
|
|
<input required value={formData.name} onChange={(e) => 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" />
|
|
</div>
|
|
<div>
|
|
<label className="text-sm text-white/70">Email</label>
|
|
<input required type="email" value={formData.email} onChange={(e) => 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" />
|
|
</div>
|
|
<div>
|
|
<label className="text-sm text-white/70">Teléfono</label>
|
|
<input required value={formData.phone} onChange={(e) => 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" />
|
|
</div>
|
|
<div>
|
|
<label className="text-sm text-white/70">Mensaje</label>
|
|
<textarea required value={formData.message} onChange={(e) => setFormData({...formData, message: e.target.value})} rows={3} 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="¿Qué necesitas automatizar?" />
|
|
</div>
|
|
<button type="submit" className="w-full py-3 bg-brand-pink rounded-lg font-medium hover:bg-[#ff7bc0] transition">Enviar mensaje</button>
|
|
</form>
|
|
</motion.div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Footer */}
|
|
<footer className="py-8 border-t border-white/10 text-center text-white/40 text-sm">
|
|
<p>© 2026 SiteMente. Parte de la familia HolaCompi.</p>
|
|
</footer>
|
|
</div>
|
|
);
|
|
}
|