function MainComponent() { const [rentalDetails, setRentalDetails] = React.useState({ fullName: '', email: '', date: '', rentalDuration: '1', dumpsterSize: 'small', deliveryAddress: '', specialInstructions: '' }); const handleChange = (e)=>{ const { name, value } = e.target; setRentalDetails((prevState)=>({ ...prevState, [name]: value })); }; const handleSubmit = (e)=>{ e.preventDefault(); alert('Rental request submitted!'); }; const dumpsterImage = '/dumpster.jpg'; const dumpsterSizes = [ { value: 'small', label: 'Small - 10 yards' }, { value: 'medium', label: 'Medium - 20 yards' }, { value: 'large', label: 'Large - 30 yards' } ]; const dumpsterSizeOptions = dumpsterSizes.map((size)=>/*#__PURE__*/ React.createElement("option", { key: size.value, value: size.value, __source: { fileName: "", lineNumber: 29, columnNumber: 5 }, __self: this }, size.label)); return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#F4F7F6] flex flex-col items-center justify-center font-roboto text-[#333333]", __source: { fileName: "", lineNumber: 34, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl mb-4", __source: { fileName: "", lineNumber: 35, columnNumber: 7 }, __self: this }, "254 Disposal Dumpster Rental and Junk Removal"), /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-[500px] bg-white p-8 rounded shadow-lg", __source: { fileName: "", lineNumber: 37, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 38, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 39, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "fullName", className: "block text-gray-700 text-sm mb-2", __source: { fileName: "", lineNumber: 40, columnNumber: 13 }, __self: this }, "Full Name"), /*#__PURE__*/ React.createElement("input", { className: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700", id: "fullName", name: "fullName", type: "text", placeholder: "Jane Smith", value: rentalDetails.fullName, onChange: handleChange, required: true, __source: { fileName: "", lineNumber: 43, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 54, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "email", className: "block text-gray-700 text-sm mb-2", __source: { fileName: "", lineNumber: 55, columnNumber: 13 }, __self: this }, "Email Address"), /*#__PURE__*/ React.createElement("input", { className: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700", id: "email", name: "email", type: "email", placeholder: "janesmith@example.com", value: rentalDetails.email, onChange: handleChange, required: true, __source: { fileName: "", lineNumber: 58, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 69, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "date", className: "block text-gray-700 text-sm mb-2", __source: { fileName: "", lineNumber: 70, columnNumber: 13 }, __self: this }, "Delivery Date"), /*#__PURE__*/ React.createElement("input", { className: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700", id: "date", name: "date", type: "date", onChange: handleChange, required: true, __source: { fileName: "", lineNumber: 73, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 82, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "rentalDuration", className: "block text-gray-700 text-sm mb-2", __source: { fileName: "", lineNumber: 83, columnNumber: 13 }, __self: this }, "Rental Duration (Days)"), /*#__PURE__*/ React.createElement("input", { className: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700", id: "rentalDuration", name: "rentalDuration", type: "number", min: "1", placeholder: "1", value: rentalDetails.rentalDuration, onChange: handleChange, required: true, __source: { fileName: "", lineNumber: 86, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 98, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "dumpsterSize", className: "block text-gray-700 text-sm mb-2", __source: { fileName: "", lineNumber: 99, columnNumber: 13 }, __self: this }, "Dumpster Size"), /*#__PURE__*/ React.createElement("select", { className: "block appearance-none w-full bg-white border border-gray-400 hover:border-gray-500 px-4 py-2 pr-8 rounded shadow leading-tight focus:outline-none focus:shadow-outline", id: "dumpsterSize", name: "dumpsterSize", value: rentalDetails.dumpsterSize, onChange: handleChange, required: true, __source: { fileName: "", lineNumber: 102, columnNumber: 13 }, __self: this }, dumpsterSizeOptions)), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 113, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "deliveryAddress", className: "block text-gray-700 text-sm mb-2", __source: { fileName: "", lineNumber: 114, columnNumber: 13 }, __self: this }, "Delivery Address"), /*#__PURE__*/ React.createElement("input", { className: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700", id: "deliveryAddress", name: "deliveryAddress", type: "text", placeholder: "123 Main St", value: rentalDetails.deliveryAddress, onChange: handleChange, required: true, __source: { fileName: "", lineNumber: 117, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 128, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "specialInstructions", className: "block text-gray-700 text-sm mb-2", __source: { fileName: "", lineNumber: 129, columnNumber: 13 }, __self: this }, "Special Instructions (Optional)"), /*#__PURE__*/ React.createElement("textarea", { className: "h-24 shadow border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline", id: "specialInstructions", name: "specialInstructions", placeholder: "Enter any special instructions here", value: rentalDetails.specialInstructions, onChange: handleChange, __source: { fileName: "", lineNumber: 132, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex justify-end", __source: { fileName: "", lineNumber: 141, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline", type: "submit", __source: { fileName: "", lineNumber: 142, columnNumber: 13 }, __self: this }, "Rent Dumpster")))), /*#__PURE__*/ React.createElement("img", { className: "w-[300px] h-[200px] object-cover rounded-md mt-10", src: dumpsterImage, alt: "Green dumpster for junk removal", __source: { fileName: "", lineNumber: 151, columnNumber: 7 }, __self: this })); }