function MainComponent() { const products = [ { id: 1, name: 'Product 1', price: 20.00, imgSrc: 'path/to/product-image1.jpg' }, { id: 2, name: 'Product 2', price: 30.00, imgSrc: 'path/to/product-image2.jpg' }, { id: 3, name: 'Product 3', price: 40.00, imgSrc: 'path/to/product-image3.jpg' } ]; const addToCart = (product)=>{ console.log(`Adding ${product.name} to cart.`); }; return /*#__PURE__*/ React.createElement("div", { className: "font-sans bg-gray-100 min-h-screen flex flex-col", __source: { fileName: "", lineNumber: 13, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "bg-white shadow-md py-4", __source: { fileName: "", lineNumber: 14, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "container mx-auto flex justify-between items-center px-4", __source: { fileName: "", lineNumber: 15, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold text-[#121212]", __source: { fileName: "", lineNumber: 16, columnNumber: 11 }, __self: this }, "E-Commerce Store"), /*#__PURE__*/ React.createElement("nav", { __source: { fileName: "", lineNumber: 17, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("ul", { className: "flex space-x-4", __source: { fileName: "", lineNumber: 18, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 19, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "text-[#121212] hover:text-blue-500", __source: { fileName: "", lineNumber: 19, columnNumber: 19 }, __self: this }, "Home")), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 20, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "text-[#121212] hover:text-blue-500", __source: { fileName: "", lineNumber: 20, columnNumber: 19 }, __self: this }, "Shop")), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 21, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "text-[#121212] hover:text-blue-500", __source: { fileName: "", lineNumber: 21, columnNumber: 19 }, __self: this }, "Cart")), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 22, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "text-[#121212] hover:text-blue-500", __source: { fileName: "", lineNumber: 22, columnNumber: 19 }, __self: this }, "Account")))))), /*#__PURE__*/ React.createElement("main", { className: "container mx-auto py-8 px-4 flex-grow", __source: { fileName: "", lineNumber: 27, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("section", { className: "mb-12", __source: { fileName: "", lineNumber: 28, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-3xl font-medium text-[#121212] mb-6", __source: { fileName: "", lineNumber: 29, columnNumber: 11 }, __self: this }, "Featured Products"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8", __source: { fileName: "", lineNumber: 30, columnNumber: 11 }, __self: this }, products.map((product)=>/*#__PURE__*/ React.createElement("div", { key: product.id, className: "bg-white p-4 rounded-lg shadow-md", __source: { fileName: "", lineNumber: 32, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: product.imgSrc, alt: `Image of ${product.name}`, className: "w-full h-[200px] object-cover mb-4", __source: { fileName: "", lineNumber: 33, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-semibold text-[#121212]", __source: { fileName: "", lineNumber: 34, columnNumber: 17 }, __self: this }, product.name), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600 mt-2 mb-4", __source: { fileName: "", lineNumber: 35, columnNumber: 17 }, __self: this }, "$", product.price.toFixed(2)), /*#__PURE__*/ React.createElement("button", { onClick: ()=>addToCart(product), className: "bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600", __source: { fileName: "", lineNumber: 36, columnNumber: 17 }, __self: this }, "Add to Cart")))))), /*#__PURE__*/ React.createElement("footer", { className: "bg-white shadow-md py-4 mt-auto", __source: { fileName: "", lineNumber: 42, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "container mx-auto text-center text-[#121212]", __source: { fileName: "", lineNumber: 43, columnNumber: 9 }, __self: this }, "© 2023 E-Commerce Store. All rights reserved."))); }