function MainComponent() { const [loading, setLoading] = React.useState(false); const [imageUrl, setImageUrl] = React.useState(""); const handleSubmit = (event)=>{ event.preventDefault(); submitForm(event); }; const submitForm = (event)=>{ const nombre = event.target.elements.nombre.value; const descripcion = event.target.elements.descripcion.value; setLoading(true); fetch("https://hook.us1.make.com/sdfh4yne3imtw7q6iikqty0kks0hq83y", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ nombre, descripcion }) }).then((response)=>response.json()).then((data)=>{ setImageUrl(data.url); setLoading(false); return fetch("https://hook.us1.make.com/lm690wavac5aq2meu40w275die5gsnsp", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ incrementar_ejecuciones: "incrementa ejecuciones" }) }); }).catch((error)=>{ console.error("Error:", error); setLoading(false); }); }; return /*#__PURE__*/ React.createElement("div", { className: "bg-[#e6efff] min-h-screen flex flex-col items-center", __source: { fileName: "", lineNumber: 46, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-gradient-to-r from-green-400 to-blue-500 w-full py-4 text-center shadow-lg", __source: { fileName: "", lineNumber: 47, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-extrabold text-white text-4xl font-crimson-text shadow-md", __source: { fileName: "", lineNumber: 48, columnNumber: 9 }, __self: this }, "Mi Nombre Único")), /*#__PURE__*/ React.createElement("img", { src: "https://ucarecdn.com/e57d3312-8577-4a58-a660-1acb86c7a01d/-/format/auto/", alt: "Imagen decorativa", className: "w-[300px] mt-6 shadow-lg", __source: { fileName: "", lineNumber: 52, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-md shadow-lg p-6 mt-8 w-[90%] md:w-[600px]", __source: { fileName: "", lineNumber: 57, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#dff5e0] rounded-md p-4 text-[#236326] mb-4", __source: { fileName: "", lineNumber: 58, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "italic", __source: { fileName: "", lineNumber: 59, columnNumber: 11 }, __self: this }, "¡Transforma tu nombre en una imagen creativa y única! ", /*#__PURE__*/ React.createElement("br", { __source: { fileName: "", lineNumber: 60, columnNumber: 67 }, __self: this }), "Simplemente describe cómo te gustaría verlo representado.")), /*#__PURE__*/ React.createElement("div", { className: "bg-[#e8f5e9] rounded-md p-4 border border-[#c8e6c9] text-[#1b5e20] mb-4", __source: { fileName: "", lineNumber: 64, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-semibold", __source: { fileName: "", lineNumber: 65, columnNumber: 11 }, __self: this }, "Ideas, ejemplos:"), /*#__PURE__*/ React.createElement("ul", { className: "list-disc ml-5", __source: { fileName: "", lineNumber: 66, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 67, columnNumber: 13 }, __self: this }, "En un campo de flores hermosas y atrás unas montañas verdes con el sol."), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 71, columnNumber: 13 }, __self: this }, "Sobre un camino con una bicicleta de montaña con el mar de fondo."))), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 76, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 77, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 text-sm font-bold mb-2", htmlFor: "nombre", __source: { fileName: "", lineNumber: 78, columnNumber: 13 }, __self: this }, "Tu nombre:"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "nombre", placeholder: "Escribe tu nombre...", className: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline", __source: { fileName: "", lineNumber: 84, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 91, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 text-sm font-bold mb-2", htmlFor: "descripcion", __source: { fileName: "", lineNumber: 92, columnNumber: 13 }, __self: this }, "¿Qué fondo deseas debajo de tu nombre?"), /*#__PURE__*/ React.createElement("textarea", { name: "descripcion", placeholder: "Describe cómo te gustaría ver tu nombre...", className: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline", rows: "3", __source: { fileName: "", lineNumber: 98, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-[#3b9d3c] hover:bg-[#2c7d2f] text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline w-full", __source: { fileName: "", lineNumber: 105, columnNumber: 11 }, __self: this }, "Mi nombre único")), loading && /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 113, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-spinner fa-spin text-2xl", __source: { fileName: "", lineNumber: 114, columnNumber: 13 }, __self: this })), imageUrl && /*#__PURE__*/ React.createElement("div", { className: "mt-4 w-full text-center", __source: { fileName: "", lineNumber: 118, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: imageUrl, alt: "Imagen generada", className: "rounded-md shadow-md mb-2", __source: { fileName: "", lineNumber: 119, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("a", { href: imageUrl, download: true, __source: { fileName: "", lineNumber: 124, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-download text-2xl text-blue-500 hover:text-blue-700", __source: { fileName: "", lineNumber: 125, columnNumber: 15 }, __self: this })))), /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-md mt-8 mb-4", __source: { fileName: "", lineNumber: 130, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#f0f4f8] rounded-md p-4 mb-4 shadow", __source: { fileName: "", lineNumber: 131, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-bold text-lg", __source: { fileName: "", lineNumber: 132, columnNumber: 11 }, __self: this }, "AUDIOLIBRO: Tech Girls: Mujeres Líderes en la Era de la IA"), /*#__PURE__*/ React.createElement("a", { href: "/tech-girls", target: "_self", __source: { fileName: "", lineNumber: 135, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "mt-2 bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded", __source: { fileName: "", lineNumber: 135, columnNumber: 48 }, __self: this }, "Tech Girls"))), /*#__PURE__*/ React.createElement("div", { className: "bg-[#f0f4f8] rounded-md p-4 shadow", __source: { fileName: "", lineNumber: 139, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-bold text-lg", __source: { fileName: "", lineNumber: 140, columnNumber: 11 }, __self: this }, "AUDIOLIBRO: La Revolución de la Belleza con Inteligencia Artificial"), /*#__PURE__*/ React.createElement("a", { href: "/ia-en-belleza", target: "_self", __source: { fileName: "", lineNumber: 143, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "mt-2 bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded", __source: { fileName: "", lineNumber: 143, columnNumber: 51 }, __self: this }, "Belleza con IA")))), /*#__PURE__*/ React.createElement("footer", { className: "mt-auto py-3 text-center w-full bg-[#333] text-white", __source: { fileName: "", lineNumber: 148, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("a", { target: "_self", href: "https://iapersonalizada.com", className: "hover:underline", __source: { fileName: "", lineNumber: 149, columnNumber: 9 }, __self: this }, "Por RLTec"), /*#__PURE__*/ React.createElement("span", { className: "mx-2", __source: { fileName: "", lineNumber: 156, columnNumber: 9 }, __self: this }, "|"), /*#__PURE__*/ React.createElement("a", { target: "_self", href: "/ai-for-good", className: "hover:underline", __source: { fileName: "", lineNumber: 157, columnNumber: 9 }, __self: this }, "Volver a Ai for good"))); }