function MainComponent() { const productInfo = [ { imageSrc: "/skincare.jpg", altText: "Men skincare products", title: "Skincare", description: "Advanced formulas to hydrate and rejuvenate your skin." }, { imageSrc: "/haircare.jpg", altText: "Men haircare solutions", title: "Haircare", description: "Top-tier products for strong and healthy hair." }, { imageSrc: "/fragrances.jpg", altText: "Premium men's fragrances", title: "Fragrances", description: "Exclusive scents to boost your confidence." } ]; return /*#__PURE__*/ React.createElement("div", { className: "bg-[#f0f0f0] min-h-screen p-5", __source: { fileName: "", lineNumber: 24, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "bg-[#182233] p-4 text-center font-roboto text-white shadow-md mb-5", __source: { fileName: "", lineNumber: 25, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-5xl", __source: { fileName: "", lineNumber: 26, columnNumber: 9 }, __self: this }, "Grooming Essentials")), /*#__PURE__*/ React.createElement("main", { className: "mt-5", __source: { fileName: "", lineNumber: 28, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("section", { className: "flex flex-wrap justify-center gap-10", __source: { fileName: "", lineNumber: 29, columnNumber: 9 }, __self: this }, productInfo.map((item, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "w-[300px] rounded overflow-hidden shadow-xl transition duration-300 hover:-translate-y-2", __source: { fileName: "", lineNumber: 31, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: item.imageSrc, alt: item.altText, className: "w-full", __source: { fileName: "", lineNumber: 32, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 33, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-roboto text-2xl mb-2", __source: { fileName: "", lineNumber: 34, columnNumber: 17 }, __self: this }, item.title), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-[#666]", __source: { fileName: "", lineNumber: 35, columnNumber: 17 }, __self: this }, item.description)))))), /*#__PURE__*/ React.createElement("footer", { className: "mt-10", __source: { fileName: "", lineNumber: 41, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("ul", { className: "flex justify-center space-x-4", __source: { fileName: "", lineNumber: 42, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("li", { className: "text-[#333] font-roboto underline cursor-pointer", __source: { fileName: "", lineNumber: 43, columnNumber: 11 }, __self: this }, "About Us"), /*#__PURE__*/ React.createElement("li", { className: "text-[#333] font-roboto underline cursor-pointer", __source: { fileName: "", lineNumber: 44, columnNumber: 11 }, __self: this }, "Products"), /*#__PURE__*/ React.createElement("li", { className: "text-[#333] font-roboto underline cursor-pointer", __source: { fileName: "", lineNumber: 45, columnNumber: 11 }, __self: this }, "Contact")))); }