function MainComponent() { const handleSubmit = (event)=>{ event.preventDefault(); const formData = new FormData(event.target); const data = Object.fromEntries(formData.entries()); const prompt = `Generate an image for a loan application form with the following details: Full Name ${data["full-name"]}, Date of Birth ${data["dob"]}, Email Address ${data["email-address"]}, Phone Number ${data["phone-number"]}, Home Address ${data["home-address"]}, Employment Status ${data["employment-status"]}, Annual Income ${data["annual-income"]}, Loan Amount ${data["loan-amount"]}, SSN ${data["ssn"]}`; fetch(`/integrations/stable-diffusion/?prompt=${encodeURIComponent(prompt)}`, { method: 'GET' }).then((response)=>response.json()).then((imageData)=>{ console.log("Generated Image URL: ", imageData.data[0]); }).catch((error)=>console.error('Error:', error)); }; return /*#__PURE__*/ React.createElement("div", { className: "bg-gradient-to-r from-blue-500 to-purple-600 min-h-screen", __source: { fileName: "", lineNumber: 20, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "bg-white shadow-lg p-5", __source: { fileName: "", lineNumber: 21, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "container mx-auto flex justify-between items-center", __source: { fileName: "", lineNumber: 22, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "/images/loan-logo.png", alt: "Loan Application Logo", className: "h-[50px]", __source: { fileName: "", lineNumber: 23, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-extrabold text-gray-900 font-roboto", __source: { fileName: "", lineNumber: 24, columnNumber: 11 }, __self: this }, "Loan Portal"))), /*#__PURE__*/ React.createElement("div", { className: "container mx-auto py-12 px-4 sm:px-6 lg:px-8", __source: { fileName: "", lineNumber: 27, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-md mx-auto bg-white p-10 rounded-xl shadow-lg", __source: { fileName: "", lineNumber: 28, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-center text-3xl font-extrabold text-gray-900 mt-6 font-roboto", __source: { fileName: "", lineNumber: 29, columnNumber: 11 }, __self: this }, "Loan Application Form"), /*#__PURE__*/ React.createElement("form", { className: "space-y-6 mt-8", onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 30, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "-space-y-px shadow-sm rounded-md", __source: { fileName: "", lineNumber: 31, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 32, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("input", { name: "full-name", type: "text", required: true, className: "relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-t-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm", placeholder: "Full Name", __source: { fileName: "", lineNumber: 33, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 35, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("input", { name: "dob", type: "date", required: true, className: "relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm", placeholder: "Date of Birth", __source: { fileName: "", lineNumber: 36, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 38, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("input", { name: "email-address", type: "email", required: true, className: "relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm", placeholder: "Email address", __source: { fileName: "", lineNumber: 39, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 41, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("input", { name: "phone-number", type: "tel", required: true, className: "relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm", placeholder: "Phone Number", __source: { fileName: "", lineNumber: 42, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 44, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("input", { name: "home-address", type: "text", required: true, className: "relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm", placeholder: "Home Address", __source: { fileName: "", lineNumber: 45, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 47, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("input", { name: "employment-status", type: "text", required: true, className: "relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm", placeholder: "Employment Status", __source: { fileName: "", lineNumber: 48, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 50, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("input", { name: "annual-income", type: "number", required: true, className: "relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm", placeholder: "Annual Income", __source: { fileName: "", lineNumber: 51, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 53, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("input", { name: "loan-amount", type: "number", required: true, className: "relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm", placeholder: "Loan Amount", __source: { fileName: "", lineNumber: 54, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 56, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("input", { name: "ssn", type: "text", required: true, className: "relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm", placeholder: "Social Security Number", __source: { fileName: "", lineNumber: 57, columnNumber: 17 }, __self: this }))), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500", __source: { fileName: "", lineNumber: 60, columnNumber: 13 }, __self: this }, "Apply for Loan"))), /*#__PURE__*/ React.createElement("div", { className: "mt-10", __source: { fileName: "", lineNumber: 65, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "/images/loan-image.jpg", alt: "People discussing loan options", className: "w-full h-[300px] object-cover rounded-xl shadow-lg", __source: { fileName: "", lineNumber: 66, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mt-6 grid grid-cols-2 gap-4", __source: { fileName: "", lineNumber: 68, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "/images/vendor1-logo.png", alt: "Vendor 1 Logo", className: "w-full h-[70px] object-contain", __source: { fileName: "", lineNumber: 69, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("img", { src: "/images/vendor2-logo.png", alt: "Vendor 2 Logo", className: "w-full h-[70px] object-contain", __source: { fileName: "", lineNumber: 70, columnNumber: 11 }, __self: this })))); }