function MainComponent() { const navigationLinks = [ 'Shop', 'Deals', 'Blog', 'Contact' ]; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#f7f7f7]", __source: { fileName: "", lineNumber: 4, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "bg-[#fee2e2] shadow-md", __source: { fileName: "", lineNumber: 5, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("nav", { className: "container mx-auto flex justify-between items-center p-4", __source: { fileName: "", lineNumber: 6, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-bold text-2xl text-[#be123c] font-roboto", __source: { fileName: "", lineNumber: 7, columnNumber: 11 }, __self: this }, "ShopZone"), /*#__PURE__*/ React.createElement("ul", { className: "flex gap-6", __source: { fileName: "", lineNumber: 8, columnNumber: 11 }, __self: this }, navigationLinks.map((link)=>/*#__PURE__*/ React.createElement("li", { key: link, className: "font-roboto hover:text-[#be123c] cursor-pointer", __source: { fileName: "", lineNumber: 10, columnNumber: 15 }, __self: this }, link))))), /*#__PURE__*/ React.createElement("main", { className: "p-4", __source: { fileName: "", lineNumber: 15, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("section", { className: "text-center py-10", __source: { fileName: "", lineNumber: 16, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-3xl font-bold text-[#be123c] mb-2 font-roboto", __source: { fileName: "", lineNumber: 17, columnNumber: 11 }, __self: this }, "Welcome to ShopZone"), /*#__PURE__*/ React.createElement("p", { className: "text-xl font-roboto", __source: { fileName: "", lineNumber: 18, columnNumber: 11 }, __self: this }, "Find the best products at unbeatable prices!")), /*#__PURE__*/ React.createElement("section", { __source: { fileName: "", lineNumber: 20, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("form", { className: "w-full max-w-md mx-auto bg-white p-6 shadow-md rounded", __source: { fileName: "", lineNumber: 21, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 22, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "search", className: "block text-gray-700 font-roboto", __source: { fileName: "", lineNumber: 23, columnNumber: 15 }, __self: this }, "Search for products"), /*#__PURE__*/ React.createElement("input", { type: "search", id: "search", name: "search", placeholder: "Search here...", className: "w-full p-3 border rounded", __source: { fileName: "", lineNumber: 24, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full bg-[#be123c] text-white py-3 rounded hover:bg-[#9f1239] transition-colors font-roboto", __source: { fileName: "", lineNumber: 26, columnNumber: 13 }, __self: this }, "Search")))), /*#__PURE__*/ React.createElement("footer", { className: "bg-[#be123c] text-white p-4 text-center", __source: { fileName: "", lineNumber: 30, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-roboto", __source: { fileName: "", lineNumber: 31, columnNumber: 9 }, __self: this }, "© ", new Date().getFullYear(), " ShopZone. Discover Quality.")), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 33, columnNumber: 7 }, __self: this }, ` body { background-color: #ffffff; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } main { animation: fadeIn 1s ease-in-out; } `)); }