function MainComponent() { const [currentPage, setCurrentPage] = React.useState('home'); const pageStyles = "flex flex-col justify-center items-center min-h-screen text-[#121212] bg-[#f5f5f5] p-4"; const imageStyles = "max-w-full h-auto rounded-lg shadow-lg"; const handleMenuClick = ()=>setCurrentPage('menu'); const handleHomeClick = ()=>setCurrentPage('home'); const handleAboutClick = ()=>setCurrentPage('about'); let pageContent; if (currentPage === 'home') { pageContent = /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 11, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-roboto text-4xl text-[#121212] mb-6", __source: { fileName: "", lineNumber: 12, columnNumber: 9 }, __self: this }, "Welcome to FoodApp"), /*#__PURE__*/ React.createElement("img", { src: "/images/food-homepage.jpg", alt: "Delicious food on the table", className: imageStyles, __source: { fileName: "", lineNumber: 13, columnNumber: 9 }, __self: this })); } else if (currentPage === 'menu') { pageContent = /*#__PURE__*/ React.createElement("div", { className: "grid md:grid-cols-2 gap-4 w-full px-4 py-6", __source: { fileName: "", lineNumber: 18, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "/images/salad.jpg", alt: "Fresh green salad", className: imageStyles, __source: { fileName: "", lineNumber: 19, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("img", { src: "/images/steak.jpg", alt: "Grilled steak with vegetables", className: imageStyles, __source: { fileName: "", lineNumber: 20, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("img", { src: "/images/pasta.jpg", alt: "Pasta with marinara sauce", className: imageStyles, __source: { fileName: "", lineNumber: 21, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("img", { src: "/images/dessert.jpg", alt: "Chocolate dessert on a plate", className: imageStyles, __source: { fileName: "", lineNumber: 22, columnNumber: 9 }, __self: this })); } else if (currentPage === 'about') { pageContent = /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 27, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-roboto text-3xl text-[#121212] mb-4", __source: { fileName: "", lineNumber: 28, columnNumber: 9 }, __self: this }, "About FoodApp"), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-[#121212] mb-4", __source: { fileName: "", lineNumber: 29, columnNumber: 9 }, __self: this }, "FoodApp is your number one source for delicious meals. Featuring a wide range of cuisines to satisfy your culinary cravings."), /*#__PURE__*/ React.createElement("img", { src: "/images/restaurant-interior.jpg", alt: "Cozy restaurant interior", className: imageStyles, __source: { fileName: "", lineNumber: 33, columnNumber: 9 }, __self: this })); } return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 38, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "bg-[#ffffff] py-4 shadow-md", __source: { fileName: "", lineNumber: 39, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("nav", { className: "container mx-auto px-6 flex justify-between items-center", __source: { fileName: "", lineNumber: 40, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: handleHomeClick, className: "font-roboto text-xl text-[#121212]", __source: { fileName: "", lineNumber: 41, columnNumber: 11 }, __self: this }, "FoodApp"), /*#__PURE__*/ React.createElement("div", { className: "hidden md:flex items-center", __source: { fileName: "", lineNumber: 42, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: handleMenuClick, className: "font-roboto text-[#121212] px-4 py-2", __source: { fileName: "", lineNumber: 43, columnNumber: 13 }, __self: this }, "Menu"), /*#__PURE__*/ React.createElement("button", { onClick: handleAboutClick, className: "font-roboto text-[#121212] px-4 py-2", __source: { fileName: "", lineNumber: 44, columnNumber: 13 }, __self: this }, "About")), /*#__PURE__*/ React.createElement("div", { className: "md:hidden", __source: { fileName: "", lineNumber: 46, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: handleMenuClick, className: "text-[#121212]", __source: { fileName: "", lineNumber: 47, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-bars", "aria-hidden": "true", __source: { fileName: "", lineNumber: 48, columnNumber: 15 }, __self: this }))))), /*#__PURE__*/ React.createElement("main", { className: pageStyles, __source: { fileName: "", lineNumber: 53, columnNumber: 7 }, __self: this }, pageContent), /*#__PURE__*/ React.createElement("footer", { className: "bg-[#ffffff] py-4 mt-8", __source: { fileName: "", lineNumber: 56, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "container mx-auto px-6 text-center", __source: { fileName: "", lineNumber: 57, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-[#121212]", __source: { fileName: "", lineNumber: 58, columnNumber: 11 }, __self: this }, "© 2023 FoodApp. All rights reserved.")))); }