function MainComponent() { const handleSubmit = (event)=>{ event.preventDefault(); }; const trendingShoesData = [ // Sample data; in a real app, data would likely come from a database or API call { id: 1, name: "Air Max 90", price: 150, image: "/images/air-max-90.jpg", alt: "Air Max 90" }, { id: 2, name: "Yeezy Boost 350", price: 220, image: "/images/yeezy-boost-350.jpg", alt: "Yeezy Boost 350" }, { id: 3, name: "Air Jordan 1 Retro", price: 170, image: "/images/air-jordan-1-retro.jpg", alt: "Air Jordan 1 Retro" } ]; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col min-h-screen bg-[#f4f7f6]", __source: { fileName: "", lineNumber: 33, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "w-full py-5 bg-[#1d1d1d] text-white", __source: { fileName: "", lineNumber: 34, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "container mx-auto flex items-center justify-between px-6", __source: { fileName: "", lineNumber: 35, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold font-roboto", __source: { fileName: "", lineNumber: 36, columnNumber: 11 }, __self: this }, "Shoe Marketplace"), /*#__PURE__*/ React.createElement("nav", { __source: { fileName: "", lineNumber: 37, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("ul", { className: "flex space-x-8", __source: { fileName: "", lineNumber: 38, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 39, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "font-roboto hover:text-[#eaeaea]", __source: { fileName: "", lineNumber: 39, columnNumber: 19 }, __self: this }, "Home")), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 40, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "font-roboto hover:text-[#eaeaea]", __source: { fileName: "", lineNumber: 40, columnNumber: 19 }, __self: this }, "Buy")), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 41, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "font-roboto hover:text-[#eaeaea]", __source: { fileName: "", lineNumber: 41, columnNumber: 19 }, __self: this }, "Sell")), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 42, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "font-roboto hover:text-[#eaeaea]", __source: { fileName: "", lineNumber: 42, columnNumber: 19 }, __self: this }, "FAQ")))))), /*#__PURE__*/ React.createElement("main", { className: "container mx-auto p-6 flex-1", __source: { fileName: "", lineNumber: 48, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("section", { className: "mb-16 text-center", __source: { fileName: "", lineNumber: 49, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-4xl font-semibold font-roboto mb-4", __source: { fileName: "", lineNumber: 50, columnNumber: 11 }, __self: this }, "Trending Shoes"), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-[#3a3a3a] mb-8", __source: { fileName: "", lineNumber: 51, columnNumber: 11 }, __self: this }, "Explore the hottest deals on shoes right now."), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-10 justify-items-center", __source: { fileName: "", lineNumber: 52, columnNumber: 11 }, __self: this }, trendingShoesData.map((shoe)=>/*#__PURE__*/ React.createElement("a", { href: "#", key: shoe.id, className: "max-w-xs block", __source: { fileName: "", lineNumber: 54, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("img", { className: "w-[200px] h-[200px] object-cover mb-3", src: shoe.image, alt: shoe.alt, __source: { fileName: "", lineNumber: 55, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-bold font-roboto", __source: { fileName: "", lineNumber: 60, columnNumber: 17 }, __self: this }, shoe.name), /*#__PURE__*/ React.createElement("p", { className: "font-roboto", __source: { fileName: "", lineNumber: 61, columnNumber: 17 }, __self: this }, "$", shoe.price))))), /*#__PURE__*/ React.createElement("section", { className: "mb-16", __source: { fileName: "", lineNumber: 67, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-3xl font-semibold font-roboto text-center mb-8", __source: { fileName: "", lineNumber: 68, columnNumber: 11 }, __self: this }, "List Your Shoes for Sale"), /*#__PURE__*/ React.createElement("form", { className: "w-full max-w-lg mx-auto bg-white shadow rounded px-8 pt-6 pb-8 mb-4", onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 69, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 73, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "shoeName", className: "block text-gray-700 text-sm font-bold font-roboto mb-2", __source: { fileName: "", lineNumber: 74, columnNumber: 15 }, __self: this }, "Shoe Name"), /*#__PURE__*/ React.createElement("input", { type: "text", className: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline", id: "shoeName", name: "shoeName", required: true, __source: { fileName: "", lineNumber: 75, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 83, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "shoeSize", className: "block text-gray-700 text-sm font-bold font-roboto mb-2", __source: { fileName: "", lineNumber: 84, columnNumber: 15 }, __self: this }, "Shoe Size"), /*#__PURE__*/ React.createElement("input", { type: "text", className: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline", id: "shoeSize", name: "shoeSize", required: true, __source: { fileName: "", lineNumber: 85, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 93, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "shoePrice", className: "block text-gray-700 text-sm font-bold font-roboto mb-2", __source: { fileName: "", lineNumber: 94, columnNumber: 15 }, __self: this }, "Asking Price ($)"), /*#__PURE__*/ React.createElement("input", { type: "number", className: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline", id: "shoePrice", name: "shoePrice", required: true, __source: { fileName: "", lineNumber: 95, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between", __source: { fileName: "", lineNumber: 103, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-[#1d1d1d] hover:bg-[#333333] text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline", __source: { fileName: "", lineNumber: 104, columnNumber: 15 }, __self: this }, "Submit Listing")))))); }