Spaces:
Runtime error
Runtime error
| import React, { useState } from 'react'; | |
| import { | |
| Cpu, | |
| Zap, | |
| Database, | |
| MessageSquare, | |
| ArrowRight, | |
| CheckCircle2, | |
| LayoutDashboard, | |
| Settings, | |
| BarChart3 | |
| } from 'lucide-react'; | |
| export default function SamuelSystemsPremium() { | |
| const [isMenuOpen, setIsMenuOpen] = useState(false); | |
| return ( | |
| <div className="min-h-screen bg-slate-50 font-sans text-slate-900 selection:bg-blue-100"> | |
| {/* --- NAVBAR --- */} | |
| <nav className="sticky top-0 z-50 bg-white/80 backdrop-blur-md border-b border-slate-200"> | |
| <div className="max-w-6xl mx-auto px-6 h-16 flex items-center justify-between"> | |
| <div className="flex items-center gap-2"> | |
| <div className="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center text-white font-bold">S</div> | |
| <span className="text-xl font-bold tracking-tight">Samuel Systems</span> | |
| </div> | |
| <div className="hidden md:flex items-center gap-8 text-sm font-medium text-slate-600"> | |
| <a href="#soluciones" className="hover:text-blue-600 transition">Soluciones</a> | |
| <a href="#stack" className="hover:text-blue-600 transition">Tecnología</a> | |
| <a href="#pricing" className="hover:text-blue-600 transition">Planes</a> | |
| <a | |
| href="#contacto" | |
| className="px-4 py-2 bg-slate-900 text-white rounded-full hover:bg-slate-800 transition" | |
| > | |
| Agendar Demo | |
| </a> | |
| </div> | |
| </div> | |
| </nav> | |
| {/* --- HERO SECTION --- */} | |
| <header className="relative pt-20 pb-32 px-6 overflow-hidden"> | |
| <div className="max-w-4xl mx-auto text-center relative z-10"> | |
| <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-blue-50 text-blue-700 text-sm font-semibold mb-6 border border-blue-100"> | |
| <Zap size={14} /> Automatización Potenciada por IA | |
| </div> | |
| <h1 className="text-5xl md:text-6xl font-extrabold tracking-tight mb-6 text-slate-900 leading-tight"> | |
| Tu empresa funcionando en <br /> | |
| <span className="text-transparent bg-clip-text bg-gradient-to-r from-blue-600 to-indigo-600"> | |
| Piloto Automático | |
| </span> | |
| </h1> | |
| <p className="text-xl text-slate-600 mb-10 max-w-2xl mx-auto leading-relaxed"> | |
| Diseñamos ecosistemas digitales a medida conectando herramientas premium. | |
| Elimina el trabajo manual, reduce errores humanos y escala sin contratar más personal. | |
| </p> | |
| <div className="flex flex-col sm:flex-row items-center justify-center gap-4"> | |
| <a href="#contacto" className="w-full sm:w-auto px-8 py-4 bg-blue-600 text-white rounded-xl font-semibold hover:bg-blue-700 transition shadow-lg shadow-blue-200 flex items-center justify-center gap-2"> | |
| Empezar ahora <ArrowRight size={18} /> | |
| </a> | |
| <a href="#soluciones" className="w-full sm:w-auto px-8 py-4 bg-white text-slate-700 border border-slate-200 rounded-xl font-semibold hover:bg-slate-50 transition"> | |
| Ver cómo funciona | |
| </a> | |
| </div> | |
| </div> | |
| {/* Background decoration */} | |
| <div className="absolute top-0 left-1/2 -translate-x-1/2 w-[1000px] h-[500px] bg-blue-100 rounded-full blur-3xl opacity-30 -z-10 pointer-events-none" /> | |
| </header> | |
| {/* --- TECH STACK (Premium Tools) --- */} | |
| <section id="stack" className="py-12 border-y border-slate-200 bg-white"> | |
| <div className="max-w-6xl mx-auto px-6 text-center"> | |
| <p className="text-sm font-semibold text-slate-500 uppercase tracking-wider mb-8"> | |
| Integramos las herramientas más potentes del mercado | |
| </p> | |
| <div className="flex flex-wrap justify-center items-center gap-8 md:gap-16 grayscale opacity-70 hover:grayscale-0 hover:opacity-100 transition-all duration-500"> | |
| {/* Logos representados con texto estilizado para este ejemplo */} | |
| <span className="text-xl font-bold flex items-center gap-2"><Cpu size={20}/> OpenAI (GPT-4)</span> | |
| <span className="text-xl font-bold flex items-center gap-2"><LayoutDashboard size={20}/> Airtable</span> | |
| <span className="text-xl font-bold flex items-center gap-2"><Settings size={20}/> Make / Zapier</span> | |
| <span className="text-xl font-bold flex items-center gap-2"><MessageSquare size={20}/> Slack / Teams</span> | |
| <span className="text-xl font-bold flex items-center gap-2"><Database size={20}/> Notion</span> | |
| </div> | |
| </div> | |
| </section> | |
| {/* --- FEATURES & USE CASES --- */} | |
| <section id="soluciones" className="py-24 px-6 max-w-6xl mx-auto"> | |
| <div className="mb-16"> | |
| <h2 className="text-3xl md:text-4xl font-bold mb-4">Más que scripts, creamos sistemas.</h2> | |
| <p className="text-lg text-slate-600 max-w-2xl"> | |
| No hacemos "parches". Construimos flujos de datos robustos que conectan tus departamentos. | |
| </p> | |
| </div> | |
| <div className="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| {/* Card 1 */} | |
| <div className="bg-white p-8 rounded-2xl border border-slate-200 hover:shadow-xl hover:border-blue-200 transition-all group"> | |
| <div className="w-12 h-12 bg-blue-50 text-blue-600 rounded-lg flex items-center justify-center mb-6 group-hover:scale-110 transition"> | |
| <MessageSquare size={24} /> | |
| </div> | |
| <h3 className="text-xl font-bold mb-3">Atención al Cliente IA</h3> | |
| <p className="text-slate-600"> | |
| Chatbots entrenados con tu data que responden correos y WhatsApps 24/7, filtran leads y agendan reuniones automáticamente. | |
| </p> | |
| </div> | |
| {/* Card 2 */} | |
| <div className="bg-white p-8 rounded-2xl border border-slate-200 hover:shadow-xl hover:border-blue-200 transition-all group"> | |
| <div className="w-12 h-12 bg-indigo-50 text-indigo-600 rounded-lg flex items-center justify-center mb-6 group-hover:scale-110 transition"> | |
| <BarChart3 size={24} /> | |
| </div> | |
| <h3 className="text-xl font-bold mb-3">Dashboards & Reporting</h3> | |
| <p className="text-slate-600"> | |
| Consolidamos datos de ventas, marketing y operaciones en tiempo real en Airtable o Looker Studio. Adiós a los Excel manuales. | |
| </p> | |
| </div> | |
| {/* Card 3 */} | |
| <div className="bg-white p-8 rounded-2xl border border-slate-200 hover:shadow-xl hover:border-blue-200 transition-all group"> | |
| <div className="w-12 h-12 bg-teal-50 text-teal-600 rounded-lg flex items-center justify-center mb-6 group-hover:scale-110 transition"> | |
| <Zap size={24} /> | |
| </div> | |
| <h3 className="text-xl font-bold mb-3">Operaciones & HR</h3> | |
| <p className="text-slate-600"> | |
| Onboarding de empleados, generación de contratos, facturación automática y gestión de inventarios sin intervención humana. | |
| </p> | |
| </div> | |
| </div> | |
| </section> | |
| {/* --- HOW WE WORK (The System) --- */} | |
| <section className="py-24 bg-slate-900 text-white px-6"> | |
| <div className="max-w-6xl mx-auto"> | |
| <div className="text-center mb-16"> | |
| <h2 className="text-3xl md:text-4xl font-bold mb-4">¿Cómo es el proceso?</h2> | |
| <p className="text-slate-400">Dejamos tu sistema funcionando en semanas, no meses.</p> | |
| </div> | |
| <div className="grid grid-cols-1 md:grid-cols-4 gap-8 text-center relative"> | |
| {/* Connector Line (Desktop only) */} | |
| <div className="hidden md:block absolute top-12 left-0 w-full h-0.5 bg-slate-800 -z-10"></div> | |
| <div className="relative"> | |
| <div className="w-24 h-24 mx-auto bg-slate-800 rounded-full border-4 border-slate-900 flex items-center justify-center text-2xl font-bold mb-4 z-10">1</div> | |
| <h4 className="text-xl font-semibold mb-2">Auditoría</h4> | |
| <p className="text-sm text-slate-400">Analizamos tus procesos manuales actuales y detectamos cuellos de botella.</p> | |
| </div> | |
| <div className="relative"> | |
| <div className="w-24 h-24 mx-auto bg-slate-800 rounded-full border-4 border-slate-900 flex items-center justify-center text-2xl font-bold mb-4 z-10">2</div> | |
| <h4 className="text-xl font-semibold mb-2">Diseño</h4> | |
| <p className="text-sm text-slate-400">Creamos el mapa de arquitectura seleccionando las herramientas ideales.</p> | |
| </div> | |
| <div className="relative"> | |
| <div className="w-24 h-24 mx-auto bg-blue-600 rounded-full border-4 border-slate-900 flex items-center justify-center text-2xl font-bold mb-4 shadow-lg shadow-blue-900/50 z-10">3</div> | |
| <h4 className="text-xl font-semibold mb-2">Desarrollo</h4> | |
| <p className="text-sm text-slate-400">Construimos las integraciones, conectamos APIs y configuramos la IA.</p> | |
| </div> | |
| <div className="relative"> | |
| <div className="w-24 h-24 mx-auto bg-slate-800 rounded-full border-4 border-slate-900 flex items-center justify-center text-2xl font-bold mb-4 z-10">4</div> | |
| <h4 className="text-xl font-semibold mb-2">Soporte</h4> | |
| <p className="text-sm text-slate-400">Monitoreamos el sistema para asegurar que funcione sin errores.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| {/* --- PRICING --- */} | |
| <section id="pricing" className="py-24 px-6 max-w-6xl mx-auto"> | |
| <h2 className="text-3xl md:text-4xl font-bold text-center mb-16">Inversión transparente</h2> | |
| <div className="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| {/* Starter Plan */} | |
| <div className="p-8 rounded-2xl border border-slate-200 bg-white"> | |
| <h3 className="text-xl font-semibold text-slate-500 mb-2">Starter</h3> | |
| <div className="text-4xl font-bold mb-6">$500 <span className="text-lg font-normal text-slate-500">/setup</span></div> | |
| <p className="text-sm text-slate-600 mb-6 pb-6 border-b border-slate-100">Ideal para automatizar una tarea específica y repetitiva.</p> | |
| <ul className="space-y-4 mb-8"> | |
| <li className="flex gap-3 text-sm"><CheckCircle2 size={18} className="text-green-500"/> 1 Flujo automatizado simple</li> | |
| <li className="flex gap-3 text-sm"><CheckCircle2 size={18} className="text-green-500"/> Integración de 2 herramientas</li> | |
| <li className="flex gap-3 text-sm"><CheckCircle2 size={18} className="text-green-500"/> Soporte por email</li> | |
| </ul> | |
| <button className="w-full py-3 rounded-lg border border-slate-300 font-semibold hover:bg-slate-50 transition">Elegir Starter</button> | |
| </div> | |
| {/* Pro Plan (Highlighted) */} | |
| <div className="p-8 rounded-2xl border-2 border-blue-600 bg-white shadow-2xl relative transform md:-translate-y-4"> | |
| <div className="absolute top-0 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-blue-600 text-white px-4 py-1 rounded-full text-sm font-medium">Más Popular</div> | |
| <h3 className="text-xl font-semibold text-blue-600 mb-2">Business System</h3> | |
| <div className="text-4xl font-bold mb-6">$1,500 <span className="text-lg font-normal text-slate-500">/setup</span></div> | |
| <p className="text-sm text-slate-600 mb-6 pb-6 border-b border-slate-100">Para empresas que buscan optimizar un departamento entero.</p> | |
| <ul className="space-y-4 mb-8"> | |
| <li className="flex gap-3 text-sm"><CheckCircle2 size={18} className="text-blue-600"/> Hasta 5 flujos complejos</li> | |
| <li className="flex gap-3 text-sm"><CheckCircle2 size={18} className="text-blue-600"/> Integración con OpenAI (GPT-4)</li> | |
| <li className="flex gap-3 text-sm"><CheckCircle2 size={18} className="text-blue-600"/> Dashboard de control</li> | |
| <li className="flex gap-3 text-sm"><CheckCircle2 size={18} className="text-blue-600"/> 1 mes de mantenimiento incluido</li> | |
| </ul> | |
| <button className="w-full py-3 rounded-lg bg-blue-600 text-white font-semibold hover:bg-blue-700 transition">Solicitar Business</button> | |
| </div> | |
| {/* Enterprise Plan */} | |
| <div className="p-8 rounded-2xl border border-slate-200 bg-white"> | |
| <h3 className="text-xl font-semibold text-slate-500 mb-2">Enterprise</h3> | |
| <div className="text-4xl font-bold mb-6">A Medida</div> | |
| <p className="text-sm text-slate-600 mb-6 pb-6 border-b border-slate-100">Transformación digital completa y consultoría continua.</p> | |
| <ul className="space-y-4 mb-8"> | |
| <li className="flex gap-3 text-sm"><CheckCircle2 size={18} className="text-slate-400"/> Flujos ilimitados</li> | |
| <li className="flex gap-3 text-sm"><CheckCircle2 size={18} className="text-slate-400"/> Desarrollo de Apps internas</li> | |
| <li className="flex gap-3 text-sm"><CheckCircle2 size={18} className="text-slate-400"/> SLA Prioritario</li> | |
| </ul> | |
| <button className="w-full py-3 rounded-lg border border-slate-300 font-semibold hover:bg-slate-50 transition">Hablar con Ventas</button> | |
| </div> | |
| </div> | |
| <p className="text-center mt-8 text-sm text-slate-500">* Los precios pueden variar según la complejidad. Ofrecemos planes de mantenimiento mensual opcionales.</p> | |
| </section> | |
| {/* --- CONTACT FORM --- */} | |
| <section id="contacto" className="py-24 bg-slate-50 border-t border-slate-200"> | |
| <div className="max-w-3xl mx-auto px-6"> | |
| <div className="bg-white p-8 md:p-12 rounded-3xl shadow-lg border border-slate-100"> | |
| <h2 className="text-3xl font-bold mb-2 text-center">¿Listo para automatizar?</h2> | |
| <p className="text-center text-slate-600 mb-10">Cuéntanos tu reto actual y te diremos si podemos resolverlo.</p> | |
| <form className="space-y-6"> | |
| <div className="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <div> | |
| <label className="block text-sm font-medium text-slate-700 mb-2">Nombre</label> | |
| <input className="w-full p-3 rounded-lg border border-slate-200 focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none transition" type="text" placeholder="Tu nombre" /> | |
| </div> | |
| <div> | |
| <label className="block text-sm font-medium text-slate-700 mb-2">Email Corporativo</label> | |
| <input className="w-full p-3 rounded-lg border border-slate-200 focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none transition" type="email" placeholder="nombre@empresa.com" /> | |
| </div> | |
| </div> | |
| <div> | |
| <label className="block text-sm font-medium text-slate-700 mb-2">¿Qué herramientas usas hoy?</label> | |
| <input className="w-full p-3 rounded-lg border border-slate-200 focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none transition" type="text" placeholder="Ej: Excel, Gmail, Trello..." /> | |
| </div> | |
| <div> | |
| <label className="block text-sm font-medium text-slate-700 mb-2">Describe tu proceso manual actual</label> | |
| <textarea | |
| className="w-full p-3 rounded-lg border border-slate-200 focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none transition" | |
| rows="4" | |
| placeholder="Ej: Recibo facturas por mail, las paso a Excel manualmente y luego..." | |
| ></textarea> | |
| </div> | |
| <button | |
| type="submit" | |
| className="w-full bg-slate-900 text-white py-4 px-6 rounded-xl font-bold text-lg hover:bg-slate-800 transition shadow-lg" | |
| > | |
| Solicitar Auditoría Gratuita | |
| </button> | |
| <p className="text-xs text-center text-slate-400 mt-4">Sin compromiso. Respondemos en menos de 24hs.</p> | |
| </form> | |
| </div> | |
| </div> | |
| </section> | |
| {/* --- FOOTER --- */} | |
| <footer className="bg-white border-t border-slate-200 py-12 px-6 text-center"> | |
| <div className="flex justify-center items-center gap-2 mb-6"> | |
| <div className="w-6 h-6 bg-blue-600 rounded flex items-center justify-center text-white font-bold text-xs">S</div> | |
| <span className="font-bold text-slate-900">Samuel Systems</span> | |
| </div> | |
| <p className="text-slate-500 text-sm mb-6"> | |
| © {new Date().getFullYear()} Samuel Systems. Automatización inteligente para negocios modernos. | |
| </p> | |
| <div className="flex justify-center gap-6 text-sm text-slate-400"> | |
| <a href="#" className="hover:text-slate-900">Privacidad</a> | |
| <a href="#" className="hover:text-slate-900">Términos</a> | |
| <a href="#" className="hover:text-slate-900">LinkedIn</a> | |
| </div> | |
| </footer> | |
| </div> | |
| ); | |
| } |