function MainComponent() { const [copied, setCopied] = useState(false); const [serverStatus, setServerStatus] = useState(null); const [loading, setLoading] = useState(true); const serverIP = "play.joonbhee.xyz"; const discordLink = "https://discord.gg/sugxdfTvAF"; const twitchLink = "https://www.twitch.tv/joonbhee"; const copyIP = ()=>{ navigator.clipboard.writeText(serverIP); setCopied(true); setTimeout(()=>setCopied(false), 2000); }; // Add server status check useEffect(()=>{ const checkServerStatus = async ()=>{ try { const response = await fetch("/api/ping", { method: "POST" }); if (!response.ok) { throw new Error("Failed to fetch server status"); } const data = await response.json(); setServerStatus(data); } catch (error) { console.error("Error checking server status:", error); setServerStatus({ online: false, error: "Could not check server status" }); } finally{ setLoading(false); } }; checkServerStatus(); // Check status every 30 seconds const interval = setInterval(checkServerStatus, 30000); return ()=>clearInterval(interval); }, []); return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gradient-to-b from-[#0a0a0a] to-[#121212] flex flex-col", __source: { fileName: "", lineNumber: 43, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("nav", { className: "bg-[#0a0a0a]/90 backdrop-blur-xl border-b border-[#64ff64]/10 px-6 py-4 sticky top-0 z-50", __source: { fileName: "", lineNumber: 45, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-7xl mx-auto flex items-center", __source: { fileName: "", lineNumber: 46, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-4 group", __source: { fileName: "", lineNumber: 47, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 48, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute -inset-2 bg-gradient-to-r from-[#64ff64]/20 to-transparent rounded-full blur-lg group-hover:from-[#64ff64]/30 transition-all duration-500", __source: { fileName: "", lineNumber: 49, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("img", { src: "https://ucarecdn.com/1892bbe6-924d-4465-ab52-9ab0a55e3b11/", alt: "Logo", className: "w-12 h-12 relative transform group-hover:scale-110 transition-transform duration-500", style: { imageRendering: "pixelated" }, __source: { fileName: "", lineNumber: 50, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("span", { className: "text-white font-minecraft text-2xl tracking-wider relative", style: { textShadow: "0 2px 10px rgba(100, 255, 100, 0.2), 0 0 30px rgba(100, 255, 100, 0.1)" }, __source: { fileName: "", lineNumber: 57, columnNumber: 13 }, __self: this }, "Joonhbee SMP")))), /*#__PURE__*/ React.createElement("div", { className: "flex-1 flex items-center justify-center relative overflow-hidden px-4 py-16", __source: { fileName: "", lineNumber: 71, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0", __source: { fileName: "", lineNumber: 73, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 bg-[#0a0a0a]", __source: { fileName: "", lineNumber: 74, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 bg-gradient-to-t from-[#64ff64]/5 via-transparent to-transparent animate-pulse", __source: { fileName: "", lineNumber: 75, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 bg-[url('https://ucarecdn.com/1892bbe6-924d-4465-ab52-9ab0a55e3b11/')] opacity-[0.02] bg-repeat bg-center animate-slide", style: { backgroundSize: "100px 100px" }, __source: { fileName: "", lineNumber: 76, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0", style: { backgroundImage: "linear-gradient(#64ff6410 1px, transparent 1px), linear-gradient(90deg, #64ff6410 1px, transparent 1px)", backgroundSize: "50px 50px" }, __source: { fileName: "", lineNumber: 82, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "relative z-10 max-w-6xl mx-auto", __source: { fileName: "", lineNumber: 93, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 94, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative mb-16 group", __source: { fileName: "", lineNumber: 96, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute -inset-4 bg-gradient-to-r from-[#64ff64]/10 via-[#64ff64]/5 to-[#64ff64]/10 rounded-full blur-xl animate-pulse opacity-75", __source: { fileName: "", lineNumber: 97, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 99, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "https://ucarecdn.com/1892bbe6-924d-4465-ab52-9ab0a55e3b11/", alt: "Server Logo", className: "w-80 h-80 mx-auto animate-float", style: { imageRendering: "pixelated" }, __source: { fileName: "", lineNumber: 100, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute -inset-8 rounded-3xl border-2 border-[#64ff64]/10 animate-spin-slow", __source: { fileName: "", lineNumber: 108, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute -inset-12 rounded-3xl border border-[#64ff64]/5 animate-spin-slow-reverse", __source: { fileName: "", lineNumber: 109, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute -inset-16 rounded-3xl border border-[#64ff64]/5 animate-spin-slower", __source: { fileName: "", lineNumber: 110, columnNumber: 17 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "mb-16 relative group", __source: { fileName: "", lineNumber: 115, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute -inset-4 bg-gradient-to-r from-transparent via-[#64ff64]/5 to-transparent rounded-full blur-lg group-hover:via-[#64ff64]/10 transition-all duration-500", __source: { fileName: "", lineNumber: 116, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("h2", { className: "text-4xl md:text-5xl font-minecraft text-white mb-8 tracking-wide relative transform group-hover:scale-[1.02] transition-transform duration-500", style: { textShadow: "0 2px 10px rgba(100, 255, 100, 0.3), 0 0 40px rgba(100, 255, 100, 0.1)" }, __source: { fileName: "", lineNumber: 118, columnNumber: 15 }, __self: this }, "Survival for the Seasoned Veterans"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6 max-w-2xl mx-auto", __source: { fileName: "", lineNumber: 129, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "group/feature px-6 py-4 rounded-lg bg-[#1a1a1a]/50 border border-[#64ff64]/10 backdrop-blur-sm hover:bg-[#1a1a1a]/70 transition-all duration-300", __source: { fileName: "", lineNumber: 130, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-4", __source: { fileName: "", lineNumber: 131, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-3 h-3 bg-[#64ff64] rounded-full animate-pulse", __source: { fileName: "", lineNumber: 132, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-lg text-[#cccccc] font-minecraft group-hover/feature:text-white transition-colors", __source: { fileName: "", lineNumber: 133, columnNumber: 21 }, __self: this }, "Custom Mobs"))), /*#__PURE__*/ React.createElement("div", { className: "group/feature px-6 py-4 rounded-lg bg-[#1a1a1a]/50 border border-[#64ff64]/10 backdrop-blur-sm hover:bg-[#1a1a1a]/70 transition-all duration-300", __source: { fileName: "", lineNumber: 138, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-4", __source: { fileName: "", lineNumber: 139, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-3 h-3 bg-[#64ff64] rounded-full animate-pulse", __source: { fileName: "", lineNumber: 140, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-lg text-[#cccccc] font-minecraft group-hover/feature:text-white transition-colors", __source: { fileName: "", lineNumber: 141, columnNumber: 21 }, __self: this }, "Dynamic Difficulty"))))), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col md:flex-row items-center justify-center gap-6", __source: { fileName: "", lineNumber: 150, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative group w-full md:w-auto", __source: { fileName: "", lineNumber: 152, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute -inset-2 bg-gradient-to-r from-[#64ff64]/20 via-[#64ff64]/10 to-[#64ff64]/20 rounded-2xl blur-lg opacity-75 group-hover:opacity-100 transition-all duration-500", __source: { fileName: "", lineNumber: 153, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: copyIP, className: "relative w-full md:w-auto bg-[#1a1a1a] px-10 py-6 rounded-xl border border-[#64ff64]/20 group-hover:border-[#64ff64]/30 transition-all duration-500 transform hover:scale-[1.02] hover:bg-[#1a1a1a]/70", __source: { fileName: "", lineNumber: 155, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `absolute inset-0 bg-gradient-to-r from-[#64ff64]/10 to-[#64ff64]/5 transform origin-left transition-transform duration-500 rounded-xl ${copied ? "scale-x-100" : "scale-x-0"}`, __source: { fileName: "", lineNumber: 159, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "text-3xl font-minecraft text-[#64ff64] mb-3 relative transform group-hover:scale-105 transition-transform duration-500", style: { textShadow: "0 0 20px rgba(100, 255, 100, 0.3), 0 0 40px rgba(100, 255, 100, 0.1)" }, __source: { fileName: "", lineNumber: 163, columnNumber: 19 }, __self: this }, serverIP), /*#__PURE__*/ React.createElement("p", { className: "text-sm font-minecraft text-[#999999] transition-colors group-hover:text-[#cccccc]", __source: { fileName: "", lineNumber: 172, columnNumber: 19 }, __self: this }, copied ? "IP Copied!" : "Click to Copy"), /*#__PURE__*/ React.createElement("div", { className: "mt-4 flex items-center justify-center gap-3", __source: { fileName: "", lineNumber: 177, columnNumber: 19 }, __self: this }, loading ? /*#__PURE__*/ React.createElement("div", { className: "animate-pulse flex items-center gap-2", __source: { fileName: "", lineNumber: 179, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-2 h-2 bg-[#999999] rounded-full", __source: { fileName: "", lineNumber: 180, columnNumber: 25 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-sm font-minecraft text-[#999999]", __source: { fileName: "", lineNumber: 181, columnNumber: 25 }, __self: this }, "Checking server...")) : serverStatus?.online ? /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center gap-2", __source: { fileName: "", lineNumber: 186, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-2", __source: { fileName: "", lineNumber: 187, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-2 h-2 bg-[#64ff64] rounded-full animate-pulse", __source: { fileName: "", lineNumber: 188, columnNumber: 27 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-sm font-minecraft text-[#64ff64]", __source: { fileName: "", lineNumber: 189, columnNumber: 27 }, __self: this }, "Online")), /*#__PURE__*/ React.createElement("div", { className: "text-xs font-minecraft text-[#999999]", __source: { fileName: "", lineNumber: 193, columnNumber: 25 }, __self: this }, serverStatus.players, "/", serverStatus.maxPlayers, " ", "Players • ", serverStatus.version)) : /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-2", __source: { fileName: "", lineNumber: 199, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-2 h-2 bg-red-500 rounded-full", __source: { fileName: "", lineNumber: 200, columnNumber: 25 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-sm font-minecraft text-red-500", __source: { fileName: "", lineNumber: 201, columnNumber: 25 }, __self: this }, "Offline"))))), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col sm:flex-row gap-6", __source: { fileName: "", lineNumber: 211, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: discordLink, target: "_blank", rel: "noopener noreferrer", className: "relative group bg-[#1a1a1a] px-8 py-6 rounded-xl border border-[#5865F2]/20 hover:border-[#5865F2]/30 transition-all duration-500 transform hover:scale-[1.02] hover:bg-[#1a1a1a]/70 flex items-center gap-4", __source: { fileName: "", lineNumber: 212, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute -inset-2 bg-gradient-to-r from-[#5865F2]/20 via-[#5865F2]/10 to-[#5865F2]/20 rounded-2xl blur-lg opacity-0 group-hover:opacity-100 transition-all duration-500", __source: { fileName: "", lineNumber: 218, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("i", { className: "fab fa-discord text-3xl text-[#5865F2]", __source: { fileName: "", lineNumber: 219, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "font-minecraft text-[#999999] group-hover:text-[#cccccc] transition-colors", __source: { fileName: "", lineNumber: 220, columnNumber: 19 }, __self: this }, "Join Discord")), /*#__PURE__*/ React.createElement("a", { href: twitchLink, target: "_blank", rel: "noopener noreferrer", className: "relative group bg-[#1a1a1a] px-8 py-6 rounded-xl border border-[#9146FF]/20 hover:border-[#9146FF]/30 transition-all duration-500 transform hover:scale-[1.02] hover:bg-[#1a1a1a]/70 flex items-center gap-4", __source: { fileName: "", lineNumber: 225, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute -inset-2 bg-gradient-to-r from-[#9146FF]/20 via-[#9146FF]/10 to-[#9146FF]/20 rounded-2xl blur-lg opacity-0 group-hover:opacity-100 transition-all duration-500", __source: { fileName: "", lineNumber: 231, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("i", { className: "fab fa-twitch text-3xl text-[#9146FF]", __source: { fileName: "", lineNumber: 232, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "font-minecraft text-[#999999] group-hover:text-[#cccccc] transition-colors", __source: { fileName: "", lineNumber: 233, columnNumber: 19 }, __self: this }, "Watch Stream")))))))); } /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 246, columnNumber: 1 }, __self: this }, ` @keyframes float { 0%, 100% { transform: translateY(0px) scale(1); } 50% { transform: translateY(-10px) scale(1.02); } } @keyframes float-delayed { 0%, 100% { transform: translate(0px, 0px); } 50% { transform: translate(10px, -10px); } } @keyframes float-delayed-more { 0%, 100% { transform: translate(0px, 0px); } 50% { transform: translate(-10px, -10px); } } @keyframes float-delayed-extra { 0%, 100% { transform: translate(0px, 0px); } 50% { transform: translate(5px, -15px); } } @keyframes float-reverse { 0%, 100% { transform: translate(0px, 0px); } 50% { transform: translate(-5px, 10px); } } @keyframes spin-slow { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes spin-slow-reverse { from { transform: rotate(360deg); } to { transform: rotate(0deg); } } @keyframes spin-slower { from { transform: rotate(180deg); } to { transform: rotate(-180deg); } } @keyframes slide { from { background-position: 0 0; } to { background-position: 100px 100px; } } @keyframes fall-slow { 0% { transform: translateY(-100%); opacity: 0; } 50% { opacity: 1; } 100% { transform: translateY(100vh); opacity: 0; } } @keyframes fall-slower { 0% { transform: translateY(-200%); opacity: 0; } 50% { opacity: 0.7; } 100% { transform: translateY(100vh); opacity: 0; } } @keyframes fall-fast { 0% { transform: translateY(-50%); opacity: 0; } 50% { opacity: 0.5; } 100% { transform: translateY(100vh); opacity: 0; } } .animate-float { animation: float 6s ease-in-out infinite; } .animate-float-delayed { animation: float-delayed 7s ease-in-out infinite; } .animate-float-delayed-more { animation: float-delayed-more 8s ease-in-out infinite; } .animate-float-delayed-extra { animation: float-delayed-extra 9s ease-in-out infinite; } .animate-float-reverse { animation: float-reverse 10s ease-in-out infinite; } .animate-spin-slow { animation: spin-slow 20s linear infinite; } .animate-spin-slow-reverse { animation: spin-slow-reverse 25s linear infinite; } .animate-spin-slower { animation: spin-slower 30s linear infinite; } .animate-slide { animation: slide 20s linear infinite; } .animate-fall-slow { animation: fall-slow 10s linear infinite; } .animate-fall-slower { animation: fall-slower 15s linear infinite; } .animate-fall-fast { animation: fall-fast 7s linear infinite; } `);