function MainComponent() { const [step, setStep] = React.useState(1); const [imageUploaded, setImageUploaded] = React.useState(false); const cardRef = React.useRef(); const handleSwipe = (direction)=>{ if (direction === 'left' && step > 1) { setStep(step - 1); } else if (direction === 'right' && step < 8) { setStep(step + 1); } }; const handleGesture = (e)=>{ const threshold = 150; const { startX, startY, distX, distY } = e; if (Math.abs(distX) >= threshold && Math.abs(distY) <= threshold) { if (distX > 0) { handleSwipe('right'); } else { handleSwipe('left'); } } }; let touchStart = null; const onTouchStart = (e)=>{ const touch = e.touches[0]; touchStart = { x: touch.clientX, y: touch.clientY }; }; const onTouchMove = (e)=>{ if (!touchStart) return; const touch = e.touches[0]; const distX = touch.clientX - touchStart.x; const distY = touch.clientY - touchStart.y; handleGesture({ startX: touchStart.x, startY: touchStart.y, distX, distY }); }; const onTouchEnd = ()=>{ touchStart = null; }; const bgColor = "bg-gradient-to-r from-[#4E65FF] to-[#92EFFD]"; const cardContent = { 1: /*#__PURE__*/ React.createElement("div", { className: "p-4 rounded-lg shadow-lg text-center text-[#073763]", __source: { fileName: "", lineNumber: 41, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-semibold mb-4", __source: { fileName: "", lineNumber: 42, columnNumber: 9 }, __self: this }, "Welcome to Compass Co-Lister"), /*#__PURE__*/ React.createElement("p", { className: "mb-8", __source: { fileName: "", lineNumber: 43, columnNumber: 9 }, __self: this }, "Begin your journey of listing with a touch of AI."), /*#__PURE__*/ React.createElement("button", { name: "start", className: "px-8 py-2 bg-[#FFFFFF] rounded-full text-[#073763] font-bold", __source: { fileName: "", lineNumber: 44, columnNumber: 9 }, __self: this }, "Start")), 2: /*#__PURE__*/ React.createElement("div", { className: "p-4 rounded-lg shadow-lg text-center text-[#073763]", __source: { fileName: "", lineNumber: 53, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-semibold mb-4", __source: { fileName: "", lineNumber: 54, columnNumber: 9 }, __self: this }, "Upload Your Image"), /*#__PURE__*/ React.createElement("label", { name: "imageUpload", className: "block mb-2 text-lg cursor-pointer font-medium", __source: { fileName: "", lineNumber: 55, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "file", className: "w-full opacity-0 absolute", onChange: ()=>setImageUploaded(true), __source: { fileName: "", lineNumber: 59, columnNumber: 11 }, __self: this }), imageUploaded ? 'Image Uploaded' : 'Click to Upload'), imageUploaded && /*#__PURE__*/ React.createElement("div", { className: "text-green-500", __source: { fileName: "", lineNumber: 66, columnNumber: 27 }, __self: this }, "✓ Image successfully uploaded")), 3: /*#__PURE__*/ React.createElement("div", { className: "p-4 rounded-lg shadow-lg text-center text-[#073763]", __source: { fileName: "", lineNumber: 70, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-semibold mb-4", __source: { fileName: "", lineNumber: 71, columnNumber: 9 }, __self: this }, "Describe the Condition")), 4: /*#__PURE__*/ React.createElement("div", { className: "p-4 rounded-lg shadow-lg text-center text-[#073763]", __source: { fileName: "", lineNumber: 76, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-semibold mb-4", __source: { fileName: "", lineNumber: 77, columnNumber: 9 }, __self: this }, "Set Your Title")), 5: /*#__PURE__*/ React.createElement("div", { className: "p-4 rounded-lg shadow-lg text-center text-[#073763]", __source: { fileName: "", lineNumber: 82, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-semibold mb-4", __source: { fileName: "", lineNumber: 83, columnNumber: 9 }, __self: this }, "Provide a Description")), 6: /*#__PURE__*/ React.createElement("div", { className: "p-4 rounded-lg shadow-lg text-center text-[#073763]", __source: { fileName: "", lineNumber: 88, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-semibold mb-4", __source: { fileName: "", lineNumber: 89, columnNumber: 9 }, __self: this }, "Select Enhancements")), 7: /*#__PURE__*/ React.createElement("div", { className: "p-4 rounded-lg shadow-lg text-center text-[#073763]", __source: { fileName: "", lineNumber: 94, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-semibold mb-4", __source: { fileName: "", lineNumber: 95, columnNumber: 9 }, __self: this }, "Set the Price")), 8: /*#__PURE__*/ React.createElement("div", { className: "p-4 rounded-lg shadow-lg text-center text-[#073763]", __source: { fileName: "", lineNumber: 100, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-semibold mb-4", __source: { fileName: "", lineNumber: 101, columnNumber: 9 }, __self: this }, "Preview Your Listing")) }; return /*#__PURE__*/ React.createElement("div", { ref: cardRef, onTouchStart: onTouchStart, onTouchMove: onTouchMove, onTouchEnd: onTouchEnd, className: `min-h-screen flex flex-col items-center justify-center ${bgColor} font-roboto`, __source: { fileName: "", lineNumber: 107, columnNumber: 5 }, __self: this }, cardContent[step], /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 115, columnNumber: 7 }, __self: this }, ` /* Additional styles if needed */ `)); }