function MainComponent() { const [isMenuOpen, setIsMenuOpen] = React.useState(false); const menuItems = [ { name: 'Art Gallery', link: '#art-gallery', icon: '🖼️' }, { name: 'Comics', link: '#comics', icon: '📚' }, { name: 'Animations', link: '#animations', icon: '🎞️' }, { name: 'WIP', link: '#wip', icon: '🛠️' }, { name: 'Portfolio', link: '#portfolio', icon: '🗂️' }, { name: 'Shop', link: '#shop', icon: '🛒' } ]; const toggleMenu = ()=>{ setIsMenuOpen(!isMenuOpen); }; return /*#__PURE__*/ React.createElement("div", { className: "font-roboto", __source: { fileName: "", lineNumber: 18, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("nav", { className: "bg-[#ffffff] w-full shadow-md", __source: { fileName: "", lineNumber: 19, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8", __source: { fileName: "", lineNumber: 20, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between h-16", __source: { fileName: "", lineNumber: 21, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex", __source: { fileName: "", lineNumber: 22, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex-shrink-0 flex items-center", __source: { fileName: "", lineNumber: 23, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "./logo.png", alt: "Imaginmation Art Logo", className: "block lg:hidden w-auto h-12", __source: { fileName: "", lineNumber: 24, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "hidden lg:block text-2xl text-gray-900 font-bold", __source: { fileName: "", lineNumber: 29, columnNumber: 17 }, __self: this }, "Imaginmation Art"))), /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 32, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "button", className: "inline-flex items-center justify-center p-2 rounded-md text-gray-900 hover:bg-gray-700 hover:text-white sm:hidden", onClick: toggleMenu, __source: { fileName: "", lineNumber: 33, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "sr-only", __source: { fileName: "", lineNumber: 38, columnNumber: 17 }, __self: this }, "Open main menu"), /*#__PURE__*/ React.createElement("i", { className: `${isMenuOpen ? 'fas fa-times' : 'fas fa-bars'}`, __source: { fileName: "", lineNumber: 39, columnNumber: 17 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: `${isMenuOpen ? 'block' : 'hidden'} sm:block sm:ml-6`, __source: { fileName: "", lineNumber: 42, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col sm:flex-row", __source: { fileName: "", lineNumber: 45, columnNumber: 15 }, __self: this }, menuItems.map((item)=>/*#__PURE__*/ React.createElement("a", { key: item.name, href: item.link, className: `mt-1 sm:mt-0 text-gray-900 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium ${isMenuOpen ? 'block' : 'hidden sm:block'}`, onClick: ()=>setIsMenuOpen(false), __source: { fileName: "", lineNumber: 47, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "mr-2", __source: { fileName: "", lineNumber: 55, columnNumber: 21 }, __self: this }, item.icon), item.name))))))), /*#__PURE__*/ React.createElement("header", { id: "home", className: "h-screen bg-cover bg-[url('./header-background.jpg')]", __source: { fileName: "", lineNumber: 65, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-full flex flex-col justify-center", __source: { fileName: "", lineNumber: 66, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl sm:text-5xl md:text-6xl text-white leading-tight font-bold", __source: { fileName: "", lineNumber: 67, columnNumber: 11 }, __self: this }, "Imaginmation Art"), /*#__PURE__*/ React.createElement("p", { className: "mt-4 text-lg sm:text-xl md:text-2xl text-white max-w-md", __source: { fileName: "", lineNumber: 70, columnNumber: 11 }, __self: this }, "Dive into our creative collection and find your next masterpiece or catch up on the latest animations.")))); }