function MainComponent() { const [isMenuOpen, setIsMenuOpen] = React.useState(false); const toggleMenu = ()=>{ setIsMenuOpen(!isMenuOpen); }; const menuAnimationStyle = isMenuOpen ? { animation: 'slideIn 300ms forwards' } : { animation: 'slideOut 300ms forwards' }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen p-4 bg-[#F3F4F6]", __source: { fileName: "", lineNumber: 14, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full", __source: { fileName: "", lineNumber: 15, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-right mb-4", __source: { fileName: "", lineNumber: 16, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: toggleMenu, className: "text-3xl p-2 text-[#1E90FF]", __source: { fileName: "", lineNumber: 17, columnNumber: 11 }, __self: this }, "☰")), /*#__PURE__*/ React.createElement("header", { className: "flex flex-col items-center mb-8", __source: { fileName: "", lineNumber: 24, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-semibold text-[#121212] font-roboto mb-2", __source: { fileName: "", lineNumber: 25, columnNumber: 11 }, __self: this }, "EduApp"), /*#__PURE__*/ React.createElement("p", { className: "text-lg text-[#606060] font-roboto", __source: { fileName: "", lineNumber: 26, columnNumber: 11 }, __self: this }, "Learn anytime, anywhere")), /*#__PURE__*/ React.createElement("div", { className: "bg-white shadow-lg rounded-lg overflow-hidden mb-6", __source: { fileName: "", lineNumber: 28, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "/images/education-cover.jpg", alt: "Mobile interface showing educational content", className: "w-full", __source: { fileName: "", lineNumber: 29, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "p-6", __source: { fileName: "", lineNumber: 34, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold text-[#121212] font-roboto mb-2", __source: { fileName: "", lineNumber: 35, columnNumber: 13 }, __self: this }, "Featured Course"), /*#__PURE__*/ React.createElement("p", { className: "text-[#606060] font-roboto mb-4", __source: { fileName: "", lineNumber: 36, columnNumber: 13 }, __self: this }, "Get exclusive access to our top courses with expert instructions."), /*#__PURE__*/ React.createElement("a", { href: "#subscribe", className: "block text-center bg-[#1E90FF] text-white font-roboto rounded-md py-2", __source: { fileName: "", lineNumber: 37, columnNumber: 13 }, __self: this }, "Subscribe Now"))), /*#__PURE__*/ React.createElement("div", { className: "absolute w-[75%] max-w-xs top-0 h-full bg-white shadow-lg rounded-l-lg p-4", style: menuAnimationStyle, __source: { fileName: "", lineNumber: 40, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("ul", { className: "flex flex-col", __source: { fileName: "", lineNumber: 41, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("li", { className: "flex items-center py-2", __source: { fileName: "", lineNumber: 42, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-book-reader text-[#1E90FF] text-2xl mr-3", __source: { fileName: "", lineNumber: 43, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "font-roboto text-[#121212]", __source: { fileName: "", lineNumber: 44, columnNumber: 15 }, __self: this }, "Courses")), /*#__PURE__*/ React.createElement("li", { className: "flex items-center py-2", __source: { fileName: "", lineNumber: 46, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-chalkboard-teacher text-[#1E90FF] text-2xl mr-3", __source: { fileName: "", lineNumber: 47, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "font-roboto text-[#121212]", __source: { fileName: "", lineNumber: 48, columnNumber: 15 }, __self: this }, "Instructors")), /*#__PURE__*/ React.createElement("li", { className: "flex items-center py-2", __source: { fileName: "", lineNumber: 50, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-graduation-cap text-[#1E90FF] text-2xl mr-3", __source: { fileName: "", lineNumber: 51, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "font-roboto text-[#121212]", __source: { fileName: "", lineNumber: 52, columnNumber: 15 }, __self: this }, "Achievements")), /*#__PURE__*/ React.createElement("li", { className: "flex items-center py-2", __source: { fileName: "", lineNumber: 54, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-cog text-[#1E90FF] text-2xl mr-3", __source: { fileName: "", lineNumber: 55, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "font-roboto text-[#121212]", __source: { fileName: "", lineNumber: 56, columnNumber: 15 }, __self: this }, "Settings"))))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 61, columnNumber: 7 }, __self: this }, ` @keyframes slideIn { from { transform: translateX(-100%); } to { transform: translateX(0); } } @keyframes slideOut { from { transform: translateX(0); } to { transform: translateX(-100%); } } body { font-family: 'Roboto', sans-serif; } `)); }