function MainComponent() { const [activeTab, setActiveTab] = React.useState("home"); const handleTabClick = (tab)=>{ setActiveTab(tab); }; return /*#__PURE__*/ React.createElement("div", { className: "font-sans", __source: { fileName: "", lineNumber: 9, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "flex justify-between items-center p-4 bg-[#010101] text-white", __source: { fileName: "", lineNumber: 10, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-xl font-bold", __source: { fileName: "", lineNumber: 11, columnNumber: 9 }, __self: this }, "Afroverse Music Group"), /*#__PURE__*/ React.createElement("input", { name: "search", type: "text", placeholder: "Search...", className: "bg-gray-800 rounded-full px-3 py-1 w-[300px]", __source: { fileName: "", lineNumber: 12, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex space-x-4", __source: { fileName: "", lineNumber: 18, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-bell", __source: { fileName: "", lineNumber: 19, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("i", { className: "fa fa-user-circle", __source: { fileName: "", lineNumber: 20, columnNumber: 11 }, __self: this }))), /*#__PURE__*/ React.createElement("main", { className: "p-4", __source: { fileName: "", lineNumber: 24, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "my-4", __source: { fileName: "", lineNumber: 25, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center text-2xl font-bold", __source: { fileName: "", lineNumber: 26, columnNumber: 11 }, __self: this }, "Discover New Music"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-4 mt-4", __source: { fileName: "", lineNumber: 27, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#121212] text-white p-4 rounded", __source: { fileName: "", lineNumber: 28, columnNumber: 13 }, __self: this }, "Curated Playlist 1"), /*#__PURE__*/ React.createElement("div", { className: "bg-[#121212] text-white p-4 rounded", __source: { fileName: "", lineNumber: 29, columnNumber: 13 }, __self: this }, "Trending Song 1"), /*#__PURE__*/ React.createElement("div", { className: "bg-[#121212] text-white p-4 rounded", __source: { fileName: "", lineNumber: 30, columnNumber: 13 }, __self: this }, "Recommended Artist 1"))), /*#__PURE__*/ React.createElement("div", { className: "my-4", __source: { fileName: "", lineNumber: 34, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center text-2xl font-bold", __source: { fileName: "", lineNumber: 35, columnNumber: 11 }, __self: this }, "Build Your Virtual Record Label"), /*#__PURE__*/ React.createElement("div", { className: "bg-[#121212] text-white p-4 rounded mt-4", __source: { fileName: "", lineNumber: 36, columnNumber: 11 }, __self: this }, "Overview of tools and features...")), /*#__PURE__*/ React.createElement("div", { className: "my-4", __source: { fileName: "", lineNumber: 39, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center text-2xl font-bold", __source: { fileName: "", lineNumber: 40, columnNumber: 11 }, __self: this }, "Invest in Emerging Talent"), /*#__PURE__*/ React.createElement("div", { className: "bg-[#121212] text-white p-4 rounded mt-4", __source: { fileName: "", lineNumber: 41, columnNumber: 11 }, __self: this }, "Highlighted artists and projects...")), /*#__PURE__*/ React.createElement("div", { className: "my-4", __source: { fileName: "", lineNumber: 44, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center text-2xl font-bold", __source: { fileName: "", lineNumber: 45, columnNumber: 11 }, __self: this }, "Join Upcoming Events"), /*#__PURE__*/ React.createElement("div", { className: "bg-[#121212] text-white p-4 rounded mt-4", __source: { fileName: "", lineNumber: 46, columnNumber: 11 }, __self: this }, "List of virtual and live events...")), /*#__PURE__*/ React.createElement("div", { className: "my-4", __source: { fileName: "", lineNumber: 49, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center text-2xl font-bold", __source: { fileName: "", lineNumber: 50, columnNumber: 11 }, __self: this }, "Participate in Weekly Challenges"), /*#__PURE__*/ React.createElement("div", { className: "bg-[#121212] text-white p-4 rounded mt-4", __source: { fileName: "", lineNumber: 51, columnNumber: 11 }, __self: this }, "Current and upcoming challenges...")), /*#__PURE__*/ React.createElement("div", { className: "my-4", __source: { fileName: "", lineNumber: 54, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center text-2xl font-bold", __source: { fileName: "", lineNumber: 55, columnNumber: 11 }, __self: this }, "Leverage AI for Your Music"), /*#__PURE__*/ React.createElement("div", { className: "bg-[#121212] text-white p-4 rounded mt-4", __source: { fileName: "", lineNumber: 56, columnNumber: 11 }, __self: this }, "Overview of AI tools...")), /*#__PURE__*/ React.createElement("div", { className: "my-4", __source: { fileName: "", lineNumber: 59, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center text-2xl font-bold", __source: { fileName: "", lineNumber: 60, columnNumber: 11 }, __self: this }, "Join the Afroverse Community"), /*#__PURE__*/ React.createElement("div", { className: "bg-[#121212] text-white p-4 rounded mt-4", __source: { fileName: "", lineNumber: 61, columnNumber: 11 }, __self: this }, "Forums, chat groups, and mentorship programs..."))), /*#__PURE__*/ React.createElement("footer", { className: "bg-black text-white p-4", __source: { fileName: "", lineNumber: 65, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between", __source: { fileName: "", lineNumber: 66, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 67, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-bold", __source: { fileName: "", lineNumber: 68, columnNumber: 13 }, __self: this }, "Quick Links"), /*#__PURE__*/ React.createElement("ul", { __source: { fileName: "", lineNumber: 69, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 70, columnNumber: 15 }, __self: this }, "About Us"), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 71, columnNumber: 15 }, __self: this }, "Contact"), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 72, columnNumber: 15 }, __self: this }, "Privacy Policy"), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 73, columnNumber: 15 }, __self: this }, "Terms of Service"))), /*#__PURE__*/ React.createElement("div", { className: "flex space-x-4", __source: { fileName: "", lineNumber: 76, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-instagram", __source: { fileName: "", lineNumber: 77, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("i", { className: "fa fa-tiktok", __source: { fileName: "", lineNumber: 78, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("i", { className: "fa fa-youtube", __source: { fileName: "", lineNumber: 79, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("i", { className: "fa fa-twitter", __source: { fileName: "", lineNumber: 80, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 82, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-bold", __source: { fileName: "", lineNumber: 83, columnNumber: 13 }, __self: this }, "Contact Information"), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 84, columnNumber: 13 }, __self: this }, "Email: afroversemusicgroup@gmail.com"), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 85, columnNumber: 13 }, __self: this }, "Phone: +234 8104219585")))), /*#__PURE__*/ React.createElement("nav", { className: "fixed bottom-0 left-0 right-0 bg-black text-white flex justify-around p-4", __source: { fileName: "", lineNumber: 90, columnNumber: 7 }, __self: this }, [ "home", "artists", "invest", "events", "profile" ].map((tab)=>/*#__PURE__*/ React.createElement("div", { key: tab, onClick: ()=>handleTabClick(tab), className: `flex flex-col items-center ${activeTab === tab ? "text-blue-500" : ""}`, __source: { fileName: "", lineNumber: 92, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fa ${tab === "home" ? "fa-home" : tab === "artists" ? "fa-music" : tab === "invest" ? "fa-dollar-sign" : tab === "events" ? "fa-calendar" : "fa-user"} text-2xl`, __source: { fileName: "", lineNumber: 99, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "mt-1 capitalize", __source: { fileName: "", lineNumber: 100, columnNumber: 13 }, __self: this }, tab)))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 104, columnNumber: 7 }, __self: this }, ` nav div { transition: transform 0.2s, color 0.2s; } nav div:hover { transform: scale(1.2); color: #4299e1; } `)); }