function MainComponent() { const [page, setPage] = React.useState('home'); // 'home' or 'product' const handlePageChange = (newPage)=>{ setPage(newPage); }; const homePageContent = /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen py-5 bg-[#F8F9FA]", __source: { fileName: "", lineNumber: 9, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "mb-6 text-4xl font-bold text-[#212529] font-roboto", __source: { fileName: "", lineNumber: 10, columnNumber: 7 }, __self: this }, "Welcome to Our Shopify Store"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap justify-center gap-5 w-full px-4", __source: { fileName: "", lineNumber: 11, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-sm rounded overflow-hidden shadow-lg bg-white", __source: { fileName: "", lineNumber: 12, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("img", { className: "w-full", src: "./images/featured1.jpg", alt: "Featured product", __source: { fileName: "", lineNumber: 13, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "px-6 py-4", __source: { fileName: "", lineNumber: 14, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-bold text-xl mb-2 text-[#212529] font-roboto", __source: { fileName: "", lineNumber: 15, columnNumber: 13 }, __self: this }, "Product Name"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-700 text-base font-roboto", __source: { fileName: "", lineNumber: 16, columnNumber: 13 }, __self: this }, "Check out this amazing product available in our store now!")), /*#__PURE__*/ React.createElement("div", { className: "px-6 pt-4 pb-2", __source: { fileName: "", lineNumber: 20, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-[#007BFF] hover:bg-[#0069D9] text-white font-bold py-2 px-4 rounded", onClick: ()=>handlePageChange('product'), __source: { fileName: "", lineNumber: 21, columnNumber: 13 }, __self: this }, "View Product"))))); const productPageContent = /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen py-5 bg-[#F8F9FA]", __source: { fileName: "", lineNumber: 34, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold text-[#212529] mb-6 font-roboto", __source: { fileName: "", lineNumber: 35, columnNumber: 7 }, __self: this }, "Product Details"), /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-2xl px-4", __source: { fileName: "", lineNumber: 36, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white shadow-lg rounded", __source: { fileName: "", lineNumber: 37, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("img", { className: "w-full", src: "./images/product1.jpg", alt: "Product detail view", __source: { fileName: "", lineNumber: 38, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "px-6 py-4", __source: { fileName: "", lineNumber: 39, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-bold text-3xl mb-2 text-[#212529] font-roboto", __source: { fileName: "", lineNumber: 40, columnNumber: 13 }, __self: this }, "Product Name"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-700 text-lg font-roboto", __source: { fileName: "", lineNumber: 41, columnNumber: 13 }, __self: this }, "This is our flagship product with premium quality materials."), /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 44, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "text-gray-700 font-roboto", __source: { fileName: "", lineNumber: 45, columnNumber: 15 }, __self: this }, "$99.00"))), /*#__PURE__*/ React.createElement("div", { className: "px-6 pt-4 pb-2", __source: { fileName: "", lineNumber: 48, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-[#28A745] hover:bg-[#218838] text-white font-bold py-2 px-4 rounded", __source: { fileName: "", lineNumber: 49, columnNumber: 13 }, __self: this }, "Add to Cart"))))); return /*#__PURE__*/ React.createElement("main", { __source: { fileName: "", lineNumber: 59, columnNumber: 5 }, __self: this }, page === 'home' ? homePageContent : productPageContent, /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 61, columnNumber: 7 }, __self: this }, ` body { transition: background-color 0.3s; } `)); }