Create app.py

app.py

@@ -0,0 +1,280 @@
+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>
+  );
+}