function MainComponent() { return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("nav", { className: "bg-white w-full py-4 px-6 flex justify-between items-center", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 5, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-bars mr-4 text-gray-600 cursor-pointer", __source: { fileName: "", lineNumber: 6, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 7, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-search text-gray-600 mr-2", __source: { fileName: "", lineNumber: 8, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "text", placeholder: "Search", className: "bg-[#f6f7fb] rounded-md py-2 px-4 w-[30%] focus:outline-none", __source: { fileName: "", lineNumber: 9, columnNumber: 13 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 12, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-cog text-gray-600 mr-4 cursor-pointer", __source: { fileName: "", lineNumber: 13, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("i", { className: "fas fa-users text-gray-600 cursor-pointer", __source: { fileName: "", lineNumber: 14, columnNumber: 11 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "flex mt-6", __source: { fileName: "", lineNumber: 18, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-[1500px] mx-auto bg-[#f6f7fb] px-6 py-8", __source: { fileName: "", lineNumber: 19, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6", __source: { fileName: "", lineNumber: 20, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow-md p-6", __source: { fileName: "", lineNumber: 21, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-bold text-lg mb-4", __source: { fileName: "", lineNumber: 22, columnNumber: 15 }, __self: this }, "Recommended"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-4", __source: { fileName: "", lineNumber: 23, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow-md p-4", __source: { fileName: "", lineNumber: 24, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "recommended-image-1.jpg", alt: "Recommended 1", className: "w-full h-32 object-cover rounded-lg mb-4", __source: { fileName: "", lineNumber: 25, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("h4", { className: "font-bold text-sm mb-2", __source: { fileName: "", lineNumber: 26, columnNumber: 19 }, __self: this }, "Recommended 1"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600 text-sm", __source: { fileName: "", lineNumber: 27, columnNumber: 19 }, __self: this }, "Description of Recommended 1")), /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow-md p-4", __source: { fileName: "", lineNumber: 29, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "recommended-image-2.jpg", alt: "Recommended 2", className: "w-full h-32 object-cover rounded-lg mb-4", __source: { fileName: "", lineNumber: 30, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("h4", { className: "font-bold text-sm mb-2", __source: { fileName: "", lineNumber: 31, columnNumber: 19 }, __self: this }, "Recommended 2"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600 text-sm", __source: { fileName: "", lineNumber: 32, columnNumber: 19 }, __self: this }, "Description of Recommended 2")), /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow-md p-4", __source: { fileName: "", lineNumber: 34, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "recommended-image-3.jpg", alt: "Recommended 3", className: "w-full h-32 object-cover rounded-lg mb-4", __source: { fileName: "", lineNumber: 35, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("h4", { className: "font-bold text-sm mb-2", __source: { fileName: "", lineNumber: 36, columnNumber: 19 }, __self: this }, "Recommended 3"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600 text-sm", __source: { fileName: "", lineNumber: 37, columnNumber: 19 }, __self: this }, "Description of Recommended 3")))), /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow-md p-6", __source: { fileName: "", lineNumber: 41, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-bold text-lg mb-4", __source: { fileName: "", lineNumber: 42, columnNumber: 15 }, __self: this }, "YouTube"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-4", __source: { fileName: "", lineNumber: 43, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow-md p-4", __source: { fileName: "", lineNumber: 44, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "youtube-image-1.jpg", alt: "YouTube 1", className: "w-full h-32 object-cover rounded-lg mb-4", __source: { fileName: "", lineNumber: 45, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("h4", { className: "font-bold text-sm mb-2", __source: { fileName: "", lineNumber: 46, columnNumber: 19 }, __self: this }, "YouTube 1"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600 text-sm", __source: { fileName: "", lineNumber: 47, columnNumber: 19 }, __self: this }, "Description of YouTube 1")), /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow-md p-4", __source: { fileName: "", lineNumber: 49, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "youtube-image-2.jpg", alt: "YouTube 2", className: "w-full h-32 object-cover rounded-lg mb-4", __source: { fileName: "", lineNumber: 50, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("h4", { className: "font-bold text-sm mb-2", __source: { fileName: "", lineNumber: 51, columnNumber: 19 }, __self: this }, "YouTube 2"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600 text-sm", __source: { fileName: "", lineNumber: 52, columnNumber: 19 }, __self: this }, "Description of YouTube 2")), /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow-md p-4", __source: { fileName: "", lineNumber: 54, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "youtube-image-3.jpg", alt: "YouTube 3", className: "w-full h-32 object-cover rounded-lg mb-4", __source: { fileName: "", lineNumber: 55, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("h4", { className: "font-bold text-sm mb-2", __source: { fileName: "", lineNumber: 56, columnNumber: 19 }, __self: this }, "YouTube 3"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600 text-sm", __source: { fileName: "", lineNumber: 57, columnNumber: 19 }, __self: this }, "Description of YouTube 3")))), /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow-md p-6", __source: { fileName: "", lineNumber: 61, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-bold text-lg mb-4", __source: { fileName: "", lineNumber: 62, columnNumber: 15 }, __self: this }, "News"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-4", __source: { fileName: "", lineNumber: 63, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow-md p-4", __source: { fileName: "", lineNumber: 64, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "news-image-1.jpg", alt: "News 1", className: "w-full h-32 object-cover rounded-lg mb-4", __source: { fileName: "", lineNumber: 65, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("h4", { className: "font-bold text-sm mb-2", __source: { fileName: "", lineNumber: 66, columnNumber: 19 }, __self: this }, "News 1"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600 text-sm", __source: { fileName: "", lineNumber: 67, columnNumber: 19 }, __self: this }, "Description of News 1")), /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow-md p-4", __source: { fileName: "", lineNumber: 69, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "news-image-2.jpg", alt: "News 2", className: "w-full h-32 object-cover rounded-lg mb-4", __source: { fileName: "", lineNumber: 70, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("h4", { className: "font-bold text-sm mb-2", __source: { fileName: "", lineNumber: 71, columnNumber: 19 }, __self: this }, "News 2"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600 text-sm", __source: { fileName: "", lineNumber: 72, columnNumber: 19 }, __self: this }, "Description of News 2")), /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow-md p-4", __source: { fileName: "", lineNumber: 74, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "news-image-3.jpg", alt: "News 3", className: "w-full h-32 object-cover rounded-lg mb-4", __source: { fileName: "", lineNumber: 75, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("h4", { className: "font-bold text-sm mb-2", __source: { fileName: "", lineNumber: 76, columnNumber: 19 }, __self: this }, "News 3"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600 text-sm", __source: { fileName: "", lineNumber: 77, columnNumber: 19 }, __self: this }, "Description of News 3")))), /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow-md p-6", __source: { fileName: "", lineNumber: 81, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-bold text-lg mb-4", __source: { fileName: "", lineNumber: 82, columnNumber: 15 }, __self: this }, "Book"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-4", __source: { fileName: "", lineNumber: 83, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow-md p-4", __source: { fileName: "", lineNumber: 84, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "book-image-1.jpg", alt: "Book 1", className: "w-full h-32 object-cover rounded-lg mb-4", __source: { fileName: "", lineNumber: 85, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("h4", { className: "font-bold text-sm mb-2", __source: { fileName: "", lineNumber: 86, columnNumber: 19 }, __self: this }, "Book 1"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600 text-sm", __source: { fileName: "", lineNumber: 87, columnNumber: 19 }, __self: this }, "Description of Book 1")), /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow-md p-4", __source: { fileName: "", lineNumber: 89, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "book-image-2.jpg", alt: "Book 2", className: "w-full h-32 object-cover rounded-lg mb-4", __source: { fileName: "", lineNumber: 90, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("h4", { className: "font-bold text-sm mb-2", __source: { fileName: "", lineNumber: 91, columnNumber: 19 }, __self: this }, "Book 2"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600 text-sm", __source: { fileName: "", lineNumber: 92, columnNumber: 19 }, __self: this }, "Description of Book 2")), /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow-md p-4", __source: { fileName: "", lineNumber: 94, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "book-image-3.jpg", alt: "Book 3", className: "w-full h-32 object-cover rounded-lg mb-4", __source: { fileName: "", lineNumber: 95, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("h4", { className: "font-bold text-sm mb-2", __source: { fileName: "", lineNumber: 96, columnNumber: 19 }, __self: this }, "Book 3"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600 text-sm", __source: { fileName: "", lineNumber: 97, columnNumber: 19 }, __self: this }, "Description of Book 3")))))), /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-[1500px] mx-auto bg-[#f6f7fb] px-6 py-8", __source: { fileName: "", lineNumber: 103, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow-md p-6", __source: { fileName: "", lineNumber: 104, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-bold text-lg mb-4", __source: { fileName: "", lineNumber: 105, columnNumber: 13 }, __self: this }, "Study Progress"), /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between", __source: { fileName: "", lineNumber: 106, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 107, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h4", { className: "font-bold text-sm mb-2", __source: { fileName: "", lineNumber: 108, columnNumber: 17 }, __self: this }, "Vocabulary"), /*#__PURE__*/ React.createElement("div", { className: "w-full bg-gray-200 rounded-full h-2", __source: { fileName: "", lineNumber: 109, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-blue-500 h-2 rounded-full", style: { width: '75%' }, __source: { fileName: "", lineNumber: 110, columnNumber: 19 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 113, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h4", { className: "font-bold text-sm mb-2", __source: { fileName: "", lineNumber: 114, columnNumber: 17 }, __self: this }, "Grammar"), /*#__PURE__*/ React.createElement("div", { className: "w-full bg-gray-200 rounded-full h-2", __source: { fileName: "", lineNumber: 115, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-green-500 h-2 rounded-full", style: { width: '60%' }, __source: { fileName: "", lineNumber: 116, columnNumber: 19 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 119, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h4", { className: "font-bold text-sm mb-2", __source: { fileName: "", lineNumber: 120, columnNumber: 17 }, __self: this }, "Listening"), /*#__PURE__*/ React.createElement("div", { className: "w-full bg-gray-200 rounded-full h-2", __source: { fileName: "", lineNumber: 121, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-yellow-500 h-2 rounded-full", style: { width: '80%' }, __source: { fileName: "", lineNumber: 122, columnNumber: 19 }, __self: this }))))))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 130, columnNumber: 7 }, __self: this }, ` @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } .card { animation: fadeIn 0.5s ease-in-out; } `)); }