function MainComponent() { const handleLogin = (event)=>{ event.preventDefault(); }; const backgroundImageStyle = { backgroundImage: "url('/background-pattern.svg')", backgroundSize: 'cover' }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen flex items-center justify-center font-roboto", style: backgroundImageStyle, __source: { fileName: "", lineNumber: 12, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col md:flex-row items-center justify-between w-full max-w-6xl px-4", __source: { fileName: "", lineNumber: 13, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex-1 flex justify-center mb-8 md:mb-0", __source: { fileName: "", lineNumber: 14, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "/illustration.svg" // Assuming '/illustration.svg' is the relative path to the left side illustration , alt: "Illustrative characters for login page", className: "max-w-sm md:max-w-md lg:max-w-lg", __source: { fileName: "", lineNumber: 15, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex-1 max-w-md", __source: { fileName: "", lineNumber: 21, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("form", { onSubmit: handleLogin, className: "bg-white shadow-md rounded px-8 pt-6 pb-8", __source: { fileName: "", lineNumber: 22, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold mb-8", __source: { fileName: "", lineNumber: 23, columnNumber: 13 }, __self: this }, "Welcome back!"), /*#__PURE__*/ React.createElement("p", { className: "mb-6 text-gray-700", __source: { fileName: "", lineNumber: 24, columnNumber: 13 }, __self: this }, "We're so excited to see you again!"), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 25, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "username", className: "block text-gray-700 text-sm font-bold mb-2", __source: { fileName: "", lineNumber: 26, columnNumber: 15 }, __self: this }, "EMAIL OR PHONE NUMBER"), /*#__PURE__*/ React.createElement("input", { name: "username", type: "text", required: true, className: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline", id: "username", placeholder: "Enter your email or phone number", __source: { fileName: "", lineNumber: 29, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 38, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "password", className: "block text-gray-700 text-sm font-bold mb-2", __source: { fileName: "", lineNumber: 39, columnNumber: 15 }, __self: this }, "PASSWORD"), /*#__PURE__*/ React.createElement("input", { name: "password", type: "password", required: true, className: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 mb-3 leading-tight focus:outline-none focus:shadow-outline", id: "password", placeholder: "Enter your password", __source: { fileName: "", lineNumber: 42, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("a", { href: "#", className: "text-sm text-[#00AFF4] hover:underline", __source: { fileName: "", lineNumber: 50, columnNumber: 15 }, __self: this }, "Forgot your password?")), /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between mb-6", __source: { fileName: "", lineNumber: 54, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-[#5865F2] hover:bg-[#4752c4] text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline w-full", __source: { fileName: "", lineNumber: 55, columnNumber: 15 }, __self: this }, "Log in")), /*#__PURE__*/ React.createElement("div", { className: "text-xs text-center", __source: { fileName: "", lineNumber: 62, columnNumber: 13 }, __self: this }, "Need an account? ", /*#__PURE__*/ React.createElement("a", { href: "#", className: "text-[#00AFF4] hover:underline", __source: { fileName: "", lineNumber: 63, columnNumber: 32 }, __self: this }, "Register"))), /*#__PURE__*/ React.createElement("div", { className: "bg-black shadow-md rounded px-8 pt-6 pb-8 mt-8", __source: { fileName: "", lineNumber: 66, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-white text-lg mb-4", __source: { fileName: "", lineNumber: 67, columnNumber: 13 }, __self: this }, "Log in with QR Code"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-400 mb-4", __source: { fileName: "", lineNumber: 68, columnNumber: 13 }, __self: this }, "Scan this with the Discord mobile app to log in instantly."), /*#__PURE__*/ React.createElement("img", { src: "/qr-code.svg" // Assuming '/qr-code.svg' is the relative path to the QR code image , alt: "QR code for mobile login", className: "w-32 h-32 mx-auto", __source: { fileName: "", lineNumber: 69, columnNumber: 13 }, __self: this }))))); }