function MainComponent() { const formOptions = { subjects: [ 'Adventure', 'Fantasy', 'Mystery', 'Fairy Tale', 'Science Fiction', 'Other' ], artStyles: [ 'Bold 3D Disney', 'Watercolor', 'Pastel Sketch', 'Digital Art', 'Comic Book', 'Other' ], bookLengths: [ '5 Pages', '10 Pages', '15 Pages', '20 Pages', 'Other' ], writingStyles: [ 'Rhyming', 'Descriptive', 'Adventurous', 'Whimsical', 'Other' ] }; const renderOption = (option)=>/*#__PURE__*/ React.createElement("option", { value: option, __source: { fileName: "", lineNumber: 9, columnNumber: 36 }, __self: this }, option); return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-gradient-to-r from-[#ff4d6d] via-[#4ddaff] to-[#fff700] p-10", __source: { fileName: "", lineNumber: 13, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-[60px] font-crimson-text text-white mb-10", __source: { fileName: "", lineNumber: 14, columnNumber: 9 }, __self: this }, "Readzy"), /*#__PURE__*/ React.createElement("h2", { className: "text-[48px] font-crimson-text text-white mb-16", __source: { fileName: "", lineNumber: 15, columnNumber: 9 }, __self: this }, "Create your own book!"), /*#__PURE__*/ React.createElement("div", { className: "bg-white shadow-lg rounded-lg p-6 w-full max-w-[800px] mb-10", __source: { fileName: "", lineNumber: 17, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("form", { className: "space-y-6", __source: { fileName: "", lineNumber: 18, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col", __source: { fileName: "", lineNumber: 19, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "text-lg font-roboto", htmlFor: "subject", __source: { fileName: "", lineNumber: 20, columnNumber: 15 }, __self: this }, "Subject"), /*#__PURE__*/ React.createElement("select", { className: "border border-gray-300 rounded p-2", name: "subject", __source: { fileName: "", lineNumber: 21, columnNumber: 15 }, __self: this }, formOptions.subjects.map(renderOption))), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col", __source: { fileName: "", lineNumber: 25, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "text-lg font-roboto", htmlFor: "character-description", __source: { fileName: "", lineNumber: 26, columnNumber: 15 }, __self: this }, "Character Description"), /*#__PURE__*/ React.createElement("textarea", { className: "border border-gray-300 rounded p-2", name: "character-description", __source: { fileName: "", lineNumber: 27, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col", __source: { fileName: "", lineNumber: 29, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "text-lg font-roboto", htmlFor: "art-style", __source: { fileName: "", lineNumber: 30, columnNumber: 15 }, __self: this }, "Art Style"), /*#__PURE__*/ React.createElement("select", { className: "border border-gray-300 rounded p-2", name: "art-style", __source: { fileName: "", lineNumber: 31, columnNumber: 15 }, __self: this }, formOptions.artStyles.map(renderOption))), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col", __source: { fileName: "", lineNumber: 35, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "text-lg font-roboto", htmlFor: "book-length", __source: { fileName: "", lineNumber: 36, columnNumber: 15 }, __self: this }, "Length of Book"), /*#__PURE__*/ React.createElement("select", { className: "border border-gray-300 rounded p-2", name: "book-length", __source: { fileName: "", lineNumber: 37, columnNumber: 15 }, __self: this })))))); }