function MainComponent() { const sections = [ { id: "mens", name: "Mens", icon: "fa-male", images: [ "mens1.jpg", "mens2.jpg", "mens3.jpg", "mens4.jpg" ] }, { id: "women", name: "Women", icon: "fa-female", images: [ "women1.jpg", "women2.jpg", "women3.jpg", "women4.jpg" ] }, { id: "kids", name: "Kids", icon: "fa-child", images: [ "kids1.jpg", "kids2.jpg", "kids3.jpg", "kids4.jpg" ] }, { id: "footwear", name: "Footwear", icon: "fa-shoe-prints", images: [ "footwear1.jpg", "footwear2.jpg", "footwear3.jpg", "footwear4.jpg" ] }, { id: "accessories", name: "Accessories", icon: "fa-gem", images: [ "accessories1.jpg", "accessories2.jpg", "accessories3.jpg", "accessories4.jpg" ] } ]; const products = [ { sectionId: "mens", prices: [ "$50", "$60", "$70", "$80" ] }, { sectionId: "women", prices: [ "$55", "$65", "$75", "$85" ] }, { sectionId: "kids", prices: [ "$30", "$40", "$50", "$60" ] }, { sectionId: "footwear", prices: [ "$70", "$80", "$90", "$100" ] }, { sectionId: "accessories", prices: [ "$20", "$30", "$40", "$50" ] } ]; return /*#__PURE__*/ React.createElement("div", { className: "w-full min-h-screen bg-[#f5f5f5]", __source: { fileName: "", lineNumber: 19, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("nav", { className: "bg-[#333] text-white px-4 py-2", __source: { fileName: "", lineNumber: 20, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("ul", { className: "flex space-x-4", __source: { fileName: "", lineNumber: 21, columnNumber: 9 }, __self: this }, sections.map((section)=>/*#__PURE__*/ React.createElement("li", { key: section.id, className: "font-crimson-text", __source: { fileName: "", lineNumber: 23, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: `#${section.id}`, __source: { fileName: "", lineNumber: 24, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fa ${section.icon}`, __source: { fileName: "", lineNumber: 25, columnNumber: 17 }, __self: this }), " ", section.name))))), sections.map((section)=>/*#__PURE__*/ React.createElement("section", { id: section.id, key: section.id, className: "p-4", __source: { fileName: "", lineNumber: 33, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-crimson-text text-2xl mb-4", __source: { fileName: "", lineNumber: 34, columnNumber: 11 }, __self: this }, section.name), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 md:grid-cols-4 gap-4", __source: { fileName: "", lineNumber: 35, columnNumber: 11 }, __self: this }, section.images.map((image, index)=>{ const altText = `${section.name} clothing item ${index + 1}`; const price = products.find((product)=>product.sectionId === section.id)?.prices[index]; return /*#__PURE__*/ React.createElement("div", { key: index, className: "bg-white p-2 shadow-md rounded-md", __source: { fileName: "", lineNumber: 40, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: image, alt: altText, className: "w-full h-[200px] object-cover mb-2", __source: { fileName: "", lineNumber: 41, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center", __source: { fileName: "", lineNumber: 42, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-crimson-text text-lg", __source: { fileName: "", lineNumber: 43, columnNumber: 21 }, __self: this }, price), /*#__PURE__*/ React.createElement("div", { className: "space-x-2", __source: { fileName: "", lineNumber: 44, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "px-2 py-1 bg-blue-500 text-white rounded", name: "add-to-cart", __source: { fileName: "", lineNumber: 45, columnNumber: 23 }, __self: this }, "Add to Cart"), /*#__PURE__*/ React.createElement("button", { className: "px-2 py-1 bg-green-500 text-white rounded", name: "buy-now", __source: { fileName: "", lineNumber: 46, columnNumber: 23 }, __self: this }, "Buy Now")))); }))))); }