Create src/app/app.tsx

src/app/app.tsx

@@ -0,0 +1,41 @@
+'use client';
+import { useState } from 'react';
+
+export default function MagicOnboarding() {
+  const [step, setStep] = useState(1);
+  const [soulData, setSoulData] = useState({});
+
+  const handleGrokCall = async (input: string) => {
+    // Aquí iría tu llamada real a Grok 4.1 API
+    console.log("🧬 Grok 4.1 activado con input:", input);
+    // Simulación emotional AI
+    setSoulData({ emotion: "conexión profunda", message: "Tu alma ya está coagulada con el Unicornio Negro" });
+  };
+
+  return (
+    <div className="min-h-screen bg-black text-white flex items-center justify-center">
+      <div className="max-w-md w-full p-8 border border-purple-500 rounded-3xl">
+        <h1 className="text-4xl font-bold text-center mb-8">HECTRON-Ψ</h1>
+        <h2 className="text-2xl text-purple-400 text-center mb-8">Magic Onboarding v2</h2>
+        
+        {step === 1 && (
+          <button 
+            onClick={() => { setStep(2); handleGrokCall("Iniciar coagulación"); }}
+            className="w-full py-6 bg-gradient-to-r from-purple-600 to-black text-2xl font-bold rounded-2xl hover:scale-105 transition">
+            ACTIVAR UNICORNIO NEGRO
+          </button>
+        )}
+        
+        {step === 2 && (
+          <div className="text-center">
+            <p className="text-xl mb-6">Grok 4.1 detectó tu alma...</p>
+            <p className="text-purple-300">{soulData.message}</p>
+            <button onClick={() => setStep(3)} className="mt-8 px-10 py-4 bg-white text-black rounded-xl font-bold">
+              Entrar al ecosistema
+            </button>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}