function MainComponent() { const [submitted, setSubmitted] = React.useState(false); const handleSubmit = (event)=>{ event.preventDefault(); setSubmitted(true); }; const submissionMessage = submitted ? /*#__PURE__*/ React.createElement("div", { className: "text-center py-4 text-lg", __source: { fileName: "", lineNumber: 10, columnNumber: 5 }, __self: this }, "🚗 Your car listing has been submitted successfully!") : null; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col min-h-screen bg-[#ffffff]", __source: { fileName: "", lineNumber: 16, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "bg-[#374151] text-white p-4", __source: { fileName: "", lineNumber: 17, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-roboto font-bold text-xl text-center", __source: { fileName: "", lineNumber: 18, columnNumber: 9 }, __self: this }, "Car Marketplace")), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center px-4 py-8", __source: { fileName: "", lineNumber: 21, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-roboto font-semibold text-2xl mb-6", __source: { fileName: "", lineNumber: 22, columnNumber: 9 }, __self: this }, "Sell Your Car"), /*#__PURE__*/ React.createElement("p", { className: "mb-4 text-lg text-gray-600", __source: { fileName: "", lineNumber: 23, columnNumber: 9 }, __self: this }, "Get the best deal for your car, directly from your home!"), /*#__PURE__*/ React.createElement("form", { className: "w-full max-w-lg", onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 26, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap -mx-3 mb-6", __source: { fileName: "", lineNumber: 27, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full px-3", __source: { fileName: "", lineNumber: 28, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block uppercase tracking-wide text-gray-700 text-xs font-roboto font-bold mb-2", __source: { fileName: "", lineNumber: 29, columnNumber: 15 }, __self: this }, "Car Make and Model"), /*#__PURE__*/ React.createElement("input", { className: "appearance-none block w-full bg-white text-gray-700 border border-gray-200 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white", type: "text", placeholder: "e.g., Toyota Camry", name: "makeAndModel", required: true, __source: { fileName: "", lineNumber: 32, columnNumber: 15 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap -mx-3 mb-6", __source: { fileName: "", lineNumber: 42, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full md:w-1/2 px-3 mb-6 md:mb-0", __source: { fileName: "", lineNumber: 43, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block uppercase tracking-wide text-gray-700 text-xs font-roboto font-bold mb-2", __source: { fileName: "", lineNumber: 44, columnNumber: 15 }, __self: this }, "Year"), /*#__PURE__*/ React.createElement("input", { className: "appearance-none block w-full bg-white text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white", type: "number", min: "1900", max: new Date().getFullYear(), placeholder: "e.g., 2020", name: "year", required: true, __source: { fileName: "", lineNumber: 47, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "w-full md:w-1/2 px-3", __source: { fileName: "", lineNumber: 57, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block uppercase tracking-wide text-gray-700 text-xs font-roboto font-bold mb-2", __source: { fileName: "", lineNumber: 58, columnNumber: 15 }, __self: this }, "Price"), /*#__PURE__*/ React.createElement("div", { className: "flex", __source: { fileName: "", lineNumber: 61, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "inline-flex items-center px-3 text-sm text-gray-900 bg-gray-200 border border-r-0 border-gray-200 rounded-l-md", __source: { fileName: "", lineNumber: 62, columnNumber: 17 }, __self: this }, "$"), /*#__PURE__*/ React.createElement("input", { className: "appearance-none block w-full bg-white text-gray-700 border border-gray-200 rounded-r-md py-3 px-4 leading-tight focus:outline-none focus:bg-white", type: "number", min: "0", placeholder: "15,000", name: "price", required: true, __source: { fileName: "", lineNumber: 65, columnNumber: 17 }, __self: this })))), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap -mx-3 mb-6", __source: { fileName: "", lineNumber: 77, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full px-3", __source: { fileName: "", lineNumber: 78, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block uppercase tracking-wide text-gray-700 text-xs font-roboto font-bold mb-2", __source: { fileName: "", lineNumber: 79, columnNumber: 15 }, __self: this }, "Additional Details"), /*#__PURE__*/ React.createElement("textarea", { className: "appearance-none block w-full bg-white text-gray-700 border border-gray-200 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white", rows: "5", placeholder: "Enter additional details about the car like mileage, condition, modifications, etc.", name: "additionalDetails", __source: { fileName: "", lineNumber: 82, columnNumber: 15 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap -mx-3 mb-6", __source: { fileName: "", lineNumber: 91, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full px-3 text-center", __source: { fileName: "", lineNumber: 92, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-blue-500 hover:bg-blue-700 text-white font-roboto font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline", type: "submit", __source: { fileName: "", lineNumber: 93, columnNumber: 15 }, __self: this }, "Submit Car Listing")))), submissionMessage), /*#__PURE__*/ React.createElement("footer", { className: "bg-[#374151] text-white p-4 mt-auto", __source: { fileName: "", lineNumber: 105, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center font-roboto", __source: { fileName: "", lineNumber: 106, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 107, columnNumber: 11 }, __self: this }, "Car Marketplace © 2023")))); }