function MainComponent() { const [loading, setLoading] = React.useState(false); const [imageUrl, setImageUrl] = React.useState(""); const handleSubmit = (event)=>{ event.preventDefault(); const form = event.target; const nombre = form.elements.nombre.value; const descripcion = form.elements.descripcion.value; if (nombre && descripcion) { submitForm(nombre, descripcion); } }; const submitForm = (nombre, descripcion)=>{ 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: 49, 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: 50, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-extrabold text-white text-4xl font-crimson-text shadow-md", __source: { fileName: "", lineNumber: 51, 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: 55, 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: 60, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#dff5e0] rounded-md p-4 text-[#236326] mb-4", __source: { fileName: "", lineNumber: 61, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "italic", __source: { fileName: "", lineNumber: 62, columnNumber: 11 }, __self: this }, "¡Transforma tu nombre en una imagen creativa y única! ", /*#__PURE__*/ React.createElement("br", { __source: { fileName: "", lineNumber: 63, 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: 67, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-semibold", __source: { fileName: "", lineNumber: 68, columnNumber: 11 }, __self: this }, "Ideas, ejemplos:"), /*#__PURE__*/ React.createElement("ul", { className: "list-disc ml-5", __source: { fileName: "", lineNumber: 69, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 70, columnNumber: 13 }, __self: this }, "En un campo de flores hermosas y atrás unas montañas verdes con el sol."))), /*#__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", required: true, __source: { fileName: "", lineNumber: 84, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 92, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 text-sm font-bold mb-2", htmlFor: "descripcion", __source: { fileName: "", lineNumber: 93, 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", required: true, __source: { fileName: "", lineNumber: 99, 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: 107, columnNumber: 11 }, __self: this }, "Mi nombre único")), loading && /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 115, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-spinner fa-spin text-2xl", __source: { fileName: "", lineNumber: 116, columnNumber: 13 }, __self: this })), imageUrl && /*#__PURE__*/ React.createElement("div", { className: "mt-4 w-full text-center", __source: { fileName: "", lineNumber: 120, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: imageUrl, alt: "Imagen generada", className: "rounded-md shadow-md mb-2", __source: { fileName: "", lineNumber: 121, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("a", { href: imageUrl, download: true, __source: { fileName: "", lineNumber: 126, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-download text-2xl text-blue-500 hover:text-blue-700", __source: { fileName: "", lineNumber: 127, columnNumber: 15 }, __self: this })))), /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-md mt-8 mb-4", __source: { fileName: "", lineNumber: 132, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#f0f4f8] rounded-md p-4 mb-4 shadow", __source: { fileName: "", lineNumber: 133, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-bold text-lg", __source: { fileName: "", lineNumber: 134, 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: 137, 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: 138, columnNumber: 13 }, __self: this }, "Tech Girls"))), /*#__PURE__*/ React.createElement("div", { className: "bg-[#f0f4f8] rounded-md p-4 shadow", __source: { fileName: "", lineNumber: 143, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-bold text-lg", __source: { fileName: "", lineNumber: 144, columnNumber: 11 }, __self: this }, "AUDIOLIBRO: La Revolución de la Belleza con Inteligencia Artificial, y Colorea la Moda, libro de colorear."), /*#__PURE__*/ React.createElement("a", { href: "/ia-en-belleza", target: "_self", __source: { fileName: "", lineNumber: 148, 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: 149, columnNumber: 13 }, __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: 155, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("a", { target: "_self", href: "https://iapersonalizada.com", className: "hover:underline", __source: { fileName: "", lineNumber: 156, columnNumber: 9 }, __self: this }, "Por RLTec"), /*#__PURE__*/ React.createElement("span", { className: "mx-2", __source: { fileName: "", lineNumber: 163, columnNumber: 9 }, __self: this }, "|"), /*#__PURE__*/ React.createElement("a", { target: "_self", href: "/ai-for-good", className: "hover:underline", __source: { fileName: "", lineNumber: 164, columnNumber: 9 }, __self: this }, "Volver a Ai for good"))); }