function MainComponent() { const gameInvitationNotification = 'You have new notifications! 🛎️'; const gamesList = [ 'Chess', 'Checkers', 'Scrabble' ]; const userProfile = 'Profile Management'; const onlineStatus = 'Online'; const notifications = 'Notification Settings'; const gamePreferences = 'Gaming Preferences'; const friendManagement = 'Friend Management'; const userActivity = 'User Activity Feed'; const scheduleManagement = 'Availability Schedule'; const gameOptions = gamesList.map((game, index)=>/*#__PURE__*/ React.createElement("option", { key: index, value: game, __source: { fileName: "", lineNumber: 12, columnNumber: 5 }, __self: this }, game)); return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#f0f0f0]", __source: { fileName: "", lineNumber: 17, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center py-10", __source: { fileName: "", lineNumber: 18, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-roboto text-4xl text-[#121212] mb-6", __source: { fileName: "", lineNumber: 19, columnNumber: 9 }, __self: this }, "Welcome to the Gaming Hub"), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-lg text-[#121212] mb-4", __source: { fileName: "", lineNumber: 22, columnNumber: 9 }, __self: this }, gameInvitationNotification), /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-xs sm:max-w-sm md:max-w-md lg:max-w-lg p-4 bg-white rounded-lg shadow-md", __source: { fileName: "", lineNumber: 25, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-roboto text-2xl text-[#121212] mb-4", __source: { fileName: "", lineNumber: 26, columnNumber: 11 }, __self: this }, "Login to Your Account"), /*#__PURE__*/ React.createElement("form", { className: "flex flex-col gap-4", __source: { fileName: "", lineNumber: 29, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "username", placeholder: "Username", className: "p-2 border rounded", __source: { fileName: "", lineNumber: 30, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "password", name: "password", placeholder: "Password", className: "p-2 border rounded", __source: { fileName: "", lineNumber: 31, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-[#4CAF50] text-white font-roboto p-2 rounded", __source: { fileName: "", lineNumber: 32, columnNumber: 13 }, __self: this }, "Login"), /*#__PURE__*/ React.createElement("div", { className: "flex justify-center items-center gap-2", __source: { fileName: "", lineNumber: 35, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-[#DB4437] text-white font-roboto p-2 rounded", __source: { fileName: "", lineNumber: 36, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fab fa-google", __source: { fileName: "", lineNumber: 37, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("button", { className: "bg-[#4267B2] text-white font-roboto p-2 rounded", __source: { fileName: "", lineNumber: 39, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fab fa-facebook-f", __source: { fileName: "", lineNumber: 40, columnNumber: 17 }, __self: this })))), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-center text-sm text-[#121212] mt-4", __source: { fileName: "", lineNumber: 44, columnNumber: 11 }, __self: this }, "Or ", /*#__PURE__*/ React.createElement("a", { href: "#", className: "text-[#0066FF]", __source: { fileName: "", lineNumber: 45, columnNumber: 16 }, __self: this }, "Register"), " a new account")), /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-xs sm:max-w-sm md:max-w-md lg:max-w-lg mt-8 p-4 bg-white rounded-lg shadow-md", __source: { fileName: "", lineNumber: 48, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-roboto text-2xl text-[#121212]", __source: { fileName: "", lineNumber: 49, columnNumber: 11 }, __self: this }, userProfile), /*#__PURE__*/ React.createElement("form", { className: "flex flex-col gap-4 my-4", __source: { fileName: "", lineNumber: 52, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "fullname", placeholder: "Full Name", className: "p-2 border rounded", __source: { fileName: "", lineNumber: 53, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "text", name: "email", placeholder: "Email", className: "p-2 border rounded", __source: { fileName: "", lineNumber: 54, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "file", name: "profilePicture", className: "p-2 border rounded", __source: { fileName: "", lineNumber: 55, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("textarea", { name: "bio", placeholder: "Bio", className: "p-2 border rounded", __source: { fileName: "", lineNumber: 56, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("p", { className: "text-center font-roboto text-sm text-[#121212]", __source: { fileName: "", lineNumber: 58, columnNumber: 11 }, __self: this }, onlineStatus, " | ", /*#__PURE__*/ React.createElement("a", { href: "#", className: "text-[#0066FF]", __source: { fileName: "", lineNumber: 59, columnNumber: 30 }, __self: this }, friendManagement), " | ", /*#__PURE__*/ React.createElement("a", { href: "#", className: "text-[#0066FF]", __source: { fileName: "", lineNumber: 59, columnNumber: 94 }, __self: this }, notifications)), /*#__PURE__*/ React.createElement("p", { className: "text-center font-roboto text-sm text-[#121212] mt-2", __source: { fileName: "", lineNumber: 61, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "text-[#0066FF]", __source: { fileName: "", lineNumber: 62, columnNumber: 13 }, __self: this }, userActivity))), /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-xs sm:max-w-sm md:max-w-md lg:max-w-lg mt-8 p-4 bg-white rounded-lg shadow-md", __source: { fileName: "", lineNumber: 65, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-roboto text-2xl text-[#121212]", __source: { fileName: "", lineNumber: 66, columnNumber: 11 }, __self: this }, gamePreferences), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col gap-4 my-4", __source: { fileName: "", lineNumber: 69, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("select", { name: "favGame", className: "p-2 border rounded mb-2", __source: { fileName: "", lineNumber: 70, columnNumber: 13 }, __self: this }, gameOptions), /*#__PURE__*/ React.createElement("input", { type: "text", name: "preferredTime", placeholder: "Preferred Time", className: "p-2 border rounded", __source: { fileName: "", lineNumber: 73, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "text", name: "gameMode", placeholder: "Game Mode", className: "p-2 border rounded", __source: { fileName: "", lineNumber: 74, columnNumber: 13 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-xs sm:max-w-sm md:max-w-md lg:max-w-lg mt-8 p-4 bg-white rounded-lg shadow-md", __source: { fileName: "", lineNumber: 77, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-roboto text-2xl text-[#121212]", __source: { fileName: "", lineNumber: 78, columnNumber: 11 }, __self: this }, scheduleManagement), /*#__PURE__*/ React.createElement("form", { className: "flex flex-col gap-4 my-4", __source: { fileName: "", lineNumber: 81, columnNumber: 11 }, __self: this }))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 86, columnNumber: 7 }, __self: this }, ` @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } body { animation: fadeIn 1.5s ease; } `)); }