function MainComponent() { const [vaultDescription, setVaultDescription] = React.useState(""); const [desktopCustomization, setDesktopCustomization] = React.useState(""); const [reviews, setReviews] = React.useState(""); const [cardName, setCardName] = React.useState(""); const [cardStats, setCardStats] = React.useState(""); return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center p-5 bg-[#f9f9f9] min-h-screen", __source: { fileName: "", lineNumber: 9, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-[800px] bg-white p-5 rounded shadow-md", __source: { fileName: "", lineNumber: 10, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold font-roboto mb-5 text-center", __source: { fileName: "", lineNumber: 11, columnNumber: 9 }, __self: this }, "Trading Cards Value Lookup and Management"), /*#__PURE__*/ React.createElement("section", { className: "border mb-6 p-4 rounded bg-[#e3f2fd]", __source: { fileName: "", lineNumber: 15, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold font-roboto mb-3", __source: { fileName: "", lineNumber: 16, columnNumber: 11 }, __self: this }, "Lookup Card Values"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center", __source: { fileName: "", lineNumber: 19, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "file", accept: "image/*", className: "mb-3", __source: { fileName: "", lineNumber: 20, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "bg-blue-500 text-white rounded px-4 py-2 font-roboto hover:bg-blue-600", __source: { fileName: "", lineNumber: 21, columnNumber: 13 }, __self: this }, "Upload Image"))), /*#__PURE__*/ React.createElement("section", { className: "border mb-6 p-4 rounded bg-[#e8f5e9]", __source: { fileName: "", lineNumber: 27, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold font-roboto mb-3", __source: { fileName: "", lineNumber: 28, columnNumber: 11 }, __self: this }, "Custom Desktop & Vault"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-5", __source: { fileName: "", lineNumber: 31, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-3 bg-[#f1f1f1] rounded", __source: { fileName: "", lineNumber: 32, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-roboto font-semibold text-lg", __source: { fileName: "", lineNumber: 33, columnNumber: 15 }, __self: this }, "My Vault"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col mt-2", __source: { fileName: "", lineNumber: 34, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("textarea", { name: "vault_description", className: "border rounded p-2 h-[100px] mb-3", placeholder: "Describe your vault...", value: vaultDescription, onChange: (e)=>setVaultDescription(e.target.value), __source: { fileName: "", lineNumber: 35, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "bg-green-500 text-white rounded px-4 py-2 font-roboto hover:bg-green-600", __source: { fileName: "", lineNumber: 42, columnNumber: 17 }, __self: this }, "Save Vault"))), /*#__PURE__*/ React.createElement("div", { className: "p-3 bg-[#f1f1f1] rounded", __source: { fileName: "", lineNumber: 47, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-roboto font-semibold text-lg", __source: { fileName: "", lineNumber: 48, columnNumber: 15 }, __self: this }, "Customize Desktop"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col mt-2", __source: { fileName: "", lineNumber: 49, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("textarea", { name: "desktop_customization", className: "border rounded p-2 h-[100px] mb-3", placeholder: "Enter customization details...", value: desktopCustomization, onChange: (e)=>setDesktopCustomization(e.target.value), __source: { fileName: "", lineNumber: 50, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "bg-green-500 text-white rounded px-4 py-2 font-roboto hover:bg-green-600", __source: { fileName: "", lineNumber: 57, columnNumber: 17 }, __self: this }, "Apply Customization"))))), /*#__PURE__*/ React.createElement("section", { className: "border mb-6 p-4 rounded bg-[#fce4ec]", __source: { fileName: "", lineNumber: 65, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold font-roboto mb-3", __source: { fileName: "", lineNumber: 66, columnNumber: 11 }, __self: this }, "Live Sales, Trades, Buys"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center", __source: { fileName: "", lineNumber: 69, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-pink-500 text-white rounded px-4 py-2 font-roboto hover:bg-pink-600 mb-3", __source: { fileName: "", lineNumber: 70, columnNumber: 13 }, __self: this }, "Start Live Session"), /*#__PURE__*/ React.createElement("div", { className: "w-full", __source: { fileName: "", lineNumber: 73, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("textarea", { name: "customer_reviews", className: "border rounded p-2 w-full h-[100px]", placeholder: "Leave a review...", value: reviews, onChange: (e)=>setReviews(e.target.value), __source: { fileName: "", lineNumber: 74, columnNumber: 15 }, __self: this })))), /*#__PURE__*/ React.createElement("section", { className: "border p-4 rounded bg-[#e8eaf6]", __source: { fileName: "", lineNumber: 85, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold font-roboto mb-3", __source: { fileName: "", lineNumber: 86, columnNumber: 11 }, __self: this }, "Create Personalized Trading Cards"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center", __source: { fileName: "", lineNumber: 89, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "card_name", className: "border rounded p-2 w-full mb-3", placeholder: "Enter card name", value: cardName, onChange: (e)=>setCardName(e.target.value), __source: { fileName: "", lineNumber: 90, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("textarea", { name: "card_stats", className: "border rounded p-2 w-full h-[100px] mb-3", placeholder: "Enter card stats...", value: cardStats, onChange: (e)=>setCardStats(e.target.value), __source: { fileName: "", lineNumber: 98, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "bg-blue-500 text-white rounded px-4 py-2 font-roboto hover:bg-blue-600", __source: { fileName: "", lineNumber: 105, columnNumber: 13 }, __self: this }, "Create Card"))))); }