function MainComponent() { const [products, setProducts] = React.useState([ { id: 1, name: "All Might Figure", price: 29.99, img: "/images/all-might-figure.jpg" }, { id: 2, name: "Deku Costume", price: 59.99, img: "/images/deku-costume.jpg" }, { id: 3, name: "UA High Backpack", price: 39.99, img: "/images/ua-backpack.jpg" } ]); const productList = products.map((product)=>/*#__PURE__*/ React.createElement("div", { key: product.id, className: "w-full md:w-1/3 p-4 flex flex-col items-center", __source: { fileName: "", lineNumber: 9, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-[200px] h-[300px] bg-cover bg-center mb-4", style: { backgroundImage: `url(${product.img})` }, __source: { fileName: "", lineNumber: 10, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-bold mb-2 font-roboto text-[#1A237E]", __source: { fileName: "", lineNumber: 11, columnNumber: 7 }, __self: this }, product.name), /*#__PURE__*/ React.createElement("p", { className: "text-xl font-semibold font-roboto text-[#F44336]", __source: { fileName: "", lineNumber: 12, columnNumber: 7 }, __self: this }, "$", product.price), /*#__PURE__*/ React.createElement("button", { className: "mt-4 py-2 px-4 bg-[#4CAF50] rounded text-white font-roboto hover:bg-[#388E3C]", __source: { fileName: "", lineNumber: 13, columnNumber: 7 }, __self: this }, "Add to Cart"))); return /*#__PURE__*/ React.createElement("div", { className: "font-roboto text-center bg-[#F5F5F5]", __source: { fileName: "", lineNumber: 20, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "bg-[#1A237E] text-white p-6 mb-6", __source: { fileName: "", lineNumber: 21, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl mb-2 font-bold font-crimson-text", __source: { fileName: "", lineNumber: 22, columnNumber: 9 }, __self: this }, "My Hero Academia Store"), /*#__PURE__*/ React.createElement("p", { className: "text-xl", __source: { fileName: "", lineNumber: 23, columnNumber: 9 }, __self: this }, "Find All Your Favorite Hero Gadgets and Apparel!")), /*#__PURE__*/ React.createElement("div", { className: "max-w-7xl mx-auto", __source: { fileName: "", lineNumber: 25, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap -mx-4", __source: { fileName: "", lineNumber: 26, columnNumber: 9 }, __self: this }, productList)), /*#__PURE__*/ React.createElement("footer", { className: "bg-[#1A237E] text-white p-4 mt-8", __source: { fileName: "", lineNumber: 30, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-roboto", __source: { fileName: "", lineNumber: 31, columnNumber: 9 }, __self: this }, "© 2023 My Hero Academia Store")), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 33, columnNumber: 7 }, __self: this }, ` body { margin: 0; padding: 0; height: 100%; font-family: 'Roboto', sans-serif; } `)); }