function MainComponent() { const [step, setStep] = React.useState(1); const [order, setOrder] = React.useState({ fruitName: '', quantity: 1, phoneNumber: '', name: '' }); const handleChange = (event)=>{ setOrder({ ...order, [event.target.name]: event.target.value }); }; const handleNextStep = ()=>{ if (step < 4) setStep(step + 1); }; const handlePrevStep = ()=>{ if (step > 1) setStep(step - 1); }; const handleSubmit = ()=>{ alert('Order placed successfully!'); }; let stepContent; switch(step){ case 1: stepContent = /*#__PURE__*/ React.createElement("div", { className: "flex flex-col h-screen justify-center items-center bg-cover bg-[url('./hero-fruit.jpg')]", __source: { fileName: "", lineNumber: 30, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-5xl text-white font-crimson-text mb-3", __source: { fileName: "", lineNumber: 31, columnNumber: 11 }, __self: this }, "Juicy Fruits"), /*#__PURE__*/ React.createElement("p", { className: "text-xl text-white font-roboto mb-6", __source: { fileName: "", lineNumber: 32, columnNumber: 11 }, __self: this }, "Discover a wide variety of juicy fruits at our online store. From sweet berries to tangy citrus fruits, we have it all!"), /*#__PURE__*/ React.createElement("button", { onClick: handleNextStep, className: "bg-red-500 text-white text-xl p-4 rounded-full font-crimson-text", __source: { fileName: "", lineNumber: 35, columnNumber: 11 }, __self: this }, "Shop Now")); break; case 2: stepContent = /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center space-y-4", __source: { fileName: "", lineNumber: 47, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white py-6 w-full sticky top-0 z-10", __source: { fileName: "", lineNumber: 48, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-screen-lg mx-auto px-4", __source: { fileName: "", lineNumber: 49, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-3xl font-crimson-text", __source: { fileName: "", lineNumber: 50, columnNumber: 15 }, __self: this }, "Store"), /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-roboto mt-2", __source: { fileName: "", lineNumber: 51, columnNumber: 15 }, __self: this }, "Latest Products"))), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 p-4", __source: { fileName: "", lineNumber: 54, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "space-y-2", __source: { fileName: "", lineNumber: 55, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "./kiwano.jpg", alt: "Tropical Kiwano also known as Horned Melon", className: "w-full object-cover h-48", __source: { fileName: "", lineNumber: 56, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("h3", { className: "font-crimson-text", __source: { fileName: "", lineNumber: 57, columnNumber: 15 }, __self: this }, "Kiwano (Horned Melon)"), /*#__PURE__*/ React.createElement("p", { className: "font-roboto", __source: { fileName: "", lineNumber: 58, columnNumber: 15 }, __self: this }, "$8.49 ", /*#__PURE__*/ React.createElement("span", { className: "text-red-600", __source: { fileName: "", lineNumber: 58, columnNumber: 48 }, __self: this }, "5.6% Off"))), /*#__PURE__*/ React.createElement("div", { className: "space-y-2", __source: { fileName: "", lineNumber: 60, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "./dragonfruit.jpg", alt: "Pink-skinned Dragon Fruit with white flesh", className: "w-full object-cover h-48", __source: { fileName: "", lineNumber: 61, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("h3", { className: "font-crimson-text", __source: { fileName: "", lineNumber: 62, columnNumber: 15 }, __self: this }, "Dragon Fruit"), /*#__PURE__*/ React.createElement("p", { className: "font-roboto", __source: { fileName: "", lineNumber: 63, columnNumber: 15 }, __self: this }, "$6.99 ", /*#__PURE__*/ React.createElement("span", { className: "text-red-600", __source: { fileName: "", lineNumber: 63, columnNumber: 48 }, __self: this }, "6.7% Off"))), /*#__PURE__*/ React.createElement("div", { className: "space-y-2", __source: { fileName: "", lineNumber: 65, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "./pineapples.jpg", alt: "Fresh Pineapples with green leaves", className: "w-full object-cover h-48", __source: { fileName: "", lineNumber: 66, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("h3", { className: "font-crimson-text", __source: { fileName: "", lineNumber: 67, columnNumber: 15 }, __self: this }, "Pineapples"), /*#__PURE__*/ React.createElement("p", { className: "font-roboto", __source: { fileName: "", lineNumber: 68, columnNumber: 15 }, __self: this }, "$5.49 ", /*#__PURE__*/ React.createElement("span", { className: "text-red-600", __source: { fileName: "", lineNumber: 68, columnNumber: 48 }, __self: this }, "8.3% Off"))), /*#__PURE__*/ React.createElement("div", { className: "space-y-2", __source: { fileName: "", lineNumber: 70, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "./mangoes.jpg", alt: "Ripe Mangoes hanging from the tree", className: "w-full object-cover h-48", __source: { fileName: "", lineNumber: 71, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("h3", { className: "font-crimson-text", __source: { fileName: "", lineNumber: 72, columnNumber: 15 }, __self: this }, "Mangoes"), /*#__PURE__*/ React.createElement("p", { className: "font-roboto", __source: { fileName: "", lineNumber: 73, columnNumber: 15 }, __self: this }, "$3.49 ", /*#__PURE__*/ React.createElement("span", { className: "text-red-600", __source: { fileName: "", lineNumber: 73, columnNumber: 48 }, __self: this }, "12.5% Off")))), /*#__PURE__*/ React.createElement("button", { onClick: handleNextStep, className: "mx-auto bg-red-500 text-white text-xl px-8 py-2 rounded-md font-crimson-text", __source: { fileName: "", lineNumber: 76, columnNumber: 11 }, __self: this }, "Checkout")); break; case 3: stepContent = /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center space-y-4 bg-white p-4", __source: { fileName: "", lineNumber: 85, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "fruitName", value: order.fruitName, onChange: handleChange, placeholder: "Fruit Name", className: "border-2 border-gray-300 p-3 rounded-md w-full max-w-md font-roboto", __source: { fileName: "", lineNumber: 86, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "number", name: "quantity", min: "1", value: order.quantity, onChange: handleChange, placeholder: "Quantity", className: "border-2 border-gray-300 p-3 rounded-md w-full max-w-md font-roboto", __source: { fileName: "", lineNumber: 94, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "tel", name: "phoneNumber", value: order.phoneNumber, onChange: handleChange, placeholder: "Phone Number", className: "border-2 border-gray-300 p-3 rounded-md w-full max-w-md font-roboto", __source: { fileName: "", lineNumber: 103, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: handleNextStep, className: "bg-red-500 text-white px-8 py-2 rounded-md font-crimson-text", __source: { fileName: "", lineNumber: 111, columnNumber: 11 }, __self: this }, "Next")); break; case 4: stepContent = /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center space-y-4 bg-white p-4", __source: { fileName: "", lineNumber: 120, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "name", value: order.name, onChange: handleChange, placeholder: "Your Name", className: "border-2 border-gray-300 p-3 rounded-md w-full max-w-md font-roboto", __source: { fileName: "", lineNumber: 121, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: handlePrevStep, className: "bg-gray-500 text-white px-8 py-2 rounded-md font-crimson-text", __source: { fileName: "", lineNumber: 129, columnNumber: 11 }, __self: this }, "Previous"), /*#__PURE__*/ React.createElement("button", { onClick: handleSubmit, className: "bg-green-500 text-white px-8 py-2 rounded-md font-crimson-text", __source: { fileName: "", lineNumber: 132, columnNumber: 11 }, __self: this }, "Pay Now")); break; default: stepContent = null; } return /*#__PURE__*/ React.createElement("div", { className: "w-full min-h-screen bg-gray-50", __source: { fileName: "", lineNumber: 144, columnNumber: 5 }, __self: this }, stepContent); }