function MainComponent() { const handleSubmit = (event)=>{ event.preventDefault(); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#e7e5e4] font-crimson-text", __source: { fileName: "", lineNumber: 7, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "text-4xl text-[#2D3748] p-6", __source: { fileName: "", lineNumber: 8, columnNumber: 7 }, __self: this }, "Exclusive Socks Bazaar"), /*#__PURE__*/ React.createElement("section", { className: "grid md:grid-cols-2 lg:grid-cols-3 gap-4 p-4", __source: { fileName: "", lineNumber: 12, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-sm bg-white rounded-lg shadow-md hover:shadow-lg transition-shadow", __source: { fileName: "", lineNumber: 13, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("img", { className: "w-full h-[300px] object-cover rounded-t-lg", src: "/socks/sock-1.jpg", alt: "Luxurious Silk Sock", __source: { fileName: "", lineNumber: 14, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "p-5", __source: { fileName: "", lineNumber: 15, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h5", { className: "text-xl font-semibold tracking-tight text-[#2D3748]", __source: { fileName: "", lineNumber: 16, columnNumber: 13 }, __self: this }, "Silken Comfort Socks"), /*#__PURE__*/ React.createElement("div", { className: "mt-2.5 mb-5", __source: { fileName: "", lineNumber: 17, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-3xl font-bold text-[#2D3748]", __source: { fileName: "", lineNumber: 18, columnNumber: 15 }, __self: this }, "$125")), /*#__PURE__*/ React.createElement("button", { className: "w-full text-white bg-[#4A5568] hover:bg-[#1A202C] font-medium rounded-lg text-sm px-5 py-2.5 text-center", __source: { fileName: "", lineNumber: 20, columnNumber: 13 }, __self: this }, "Add to Cart"))), /*#__PURE__*/ React.createElement("div", { className: "max-w-sm bg-white rounded-lg shadow-md hover:shadow-lg transition-shadow", __source: { fileName: "", lineNumber: 24, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("img", { className: "w-full h-[300px] object-cover rounded-t-lg", src: "/socks/sock-2.jpg", alt: "Premium Wool Sock", __source: { fileName: "", lineNumber: 25, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "p-5", __source: { fileName: "", lineNumber: 26, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h5", { className: "text-xl font-semibold tracking-tight text-[#2D3748]", __source: { fileName: "", lineNumber: 27, columnNumber: 13 }, __self: this }, "Woolen Warmth Socks"), /*#__PURE__*/ React.createElement("div", { className: "mt-2.5 mb-5", __source: { fileName: "", lineNumber: 28, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-3xl font-bold text-[#2D3748]", __source: { fileName: "", lineNumber: 29, columnNumber: 15 }, __self: this }, "$150")), /*#__PURE__*/ React.createElement("button", { className: "w-full text-white bg-[#4A5568] hover:bg-[#1A202C] font-medium rounded-lg text-sm px-5 py-2.5 text-center", __source: { fileName: "", lineNumber: 31, columnNumber: 13 }, __self: this }, "Add to Cart")))), /*#__PURE__*/ React.createElement("form", { className: "w-full max-w-lg p-4", onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 36, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap -mx-3 mb-6", __source: { fileName: "", lineNumber: 37, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full px-3", __source: { fileName: "", lineNumber: 38, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 text-sm font-bold mb-2", htmlFor: "sock-name", __source: { fileName: "", lineNumber: 39, columnNumber: 13 }, __self: this }, "Sock Name"), /*#__PURE__*/ React.createElement("input", { className: "appearance-none block w-full bg-gray-200 text-gray-700 border rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white", id: "sock-name", type: "text", name: "sock-name", __source: { fileName: "", lineNumber: 42, columnNumber: 13 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap -mx-3 mb-6", __source: { fileName: "", lineNumber: 45, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full md:w-1/2 px-3", __source: { fileName: "", lineNumber: 46, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 text-sm font-bold mb-2", htmlFor: "price", __source: { fileName: "", lineNumber: 47, columnNumber: 13 }, __self: this }, "Price"), /*#__PURE__*/ React.createElement("input", { className: "appearance-none block w-full bg-gray-200 text-gray-700 border rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white", id: "price", type: "text", name: "price", __source: { fileName: "", lineNumber: 50, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "w-full md:w-1/2 px-3", __source: { fileName: "", lineNumber: 52, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 text-sm font-bold mb-2", htmlFor: "quantity", __source: { fileName: "", lineNumber: 53, columnNumber: 13 }, __self: this }, "Quantity"), /*#__PURE__*/ React.createElement("input", { className: "appearance-none block w-full bg-gray-200 text-gray-700 border rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white", id: "quantity", type: "number", name: "quantity", __source: { fileName: "", lineNumber: 56, columnNumber: 13 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "w-full px-3", __source: { fileName: "", lineNumber: 59, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "w-full bg-[#4A5568] text-white font-bold py-2 px-4 rounded hover:bg-[#1A202C] focus:outline-none focus:shadow-outline", type: "submit", __source: { fileName: "", lineNumber: 60, columnNumber: 11 }, __self: this }, "Sell Socks"))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 66, columnNumber: 7 }, __self: this }, ` @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .transition-fade { animation: fadeIn 1s ease-in-out; } `)); }