function MainComponent() { const [isVisible, setIsVisible] = useState(true); const [gifs, setGifs] = useState([]); const [error, setError] = useState(null); useEffect(()=>{ const interval = setInterval(()=>{ setIsVisible((v)=>!v); }, 2000); return ()=>clearInterval(interval); }, []); useEffect(()=>{ const fetchGifs = async ()=>{ try { const queries = [ "party", "sparkle", "rainbow", "glitter", "celebration" ]; const allGifs = []; for (const query of queries){ const response = await fetch("/api/excited-gif-search", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ query, limit: 3 }) }); if (!response.ok) { throw new Error("Failed to fetch GIFs"); } const data = await response.json(); if (data.error) { throw new Error(data.error); } allGifs.push(...data.gifs); } const shuffled = allGifs.sort(()=>Math.random() - 0.5); setGifs(shuffled); } catch (err) { console.error("Error fetching GIFs:", err); setError("Failed to load party GIFs!"); } }; fetchGifs(); }, []); return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gradient-to-r from-purple-500 via-pink-500 to-red-500 flex items-center justify-center p-4 animate-gradient-x overflow-hidden relative", __source: { fileName: "", lineNumber: 56, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 overflow-hidden pointer-events-none", __source: { fileName: "", lineNumber: 57, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "shooting-stars", __source: { fileName: "", lineNumber: 58, columnNumber: 9 }, __self: this }, [ ...Array.from({ length: 40 }) ].map((_, i)=>/*#__PURE__*/ React.createElement("div", { key: `star-${i}`, className: "shooting-star", style: { animationDelay: `${Math.random() * 10}s`, top: `${Math.random() * 100}%`, left: `${Math.random() * 100}%` }, __source: { fileName: "", lineNumber: 60, columnNumber: 13 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "particles", __source: { fileName: "", lineNumber: 72, columnNumber: 9 }, __self: this }, [ ...Array.from({ length: 100 }) ].map((_, i)=>/*#__PURE__*/ React.createElement("div", { key: `particle-${i}`, className: "particle", style: { top: `${Math.random() * 100}%`, left: `${Math.random() * 100}%`, animationDuration: `15s`, animationDelay: `-${Math.random() * 20}s`, width: `${2 + Math.random() * 4}px`, height: `${2 + Math.random() * 4}px`, opacity: 0.1 + Math.random() * 0.3 }, __source: { fileName: "", lineNumber: 74, columnNumber: 13 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "orbs", __source: { fileName: "", lineNumber: 90, columnNumber: 9 }, __self: this }, [ ...Array.from({ length: 30 }) ].map((_, i)=>/*#__PURE__*/ React.createElement("div", { key: `orb-${i}`, className: "orb", style: { top: `${Math.random() * 100}%`, left: `${Math.random() * 100}%`, animationDuration: `20s`, animationDelay: `-${Math.random() * 15}s`, width: `${30 + Math.random() * 60}px`, height: `${30 + Math.random() * 60}px`, opacity: 0.1 + Math.random() * 0.2 }, __source: { fileName: "", lineNumber: 92, columnNumber: 13 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "cosmic-rays", __source: { fileName: "", lineNumber: 108, columnNumber: 9 }, __self: this }, [ ...Array.from({ length: 16 }) ].map((_, i)=>/*#__PURE__*/ React.createElement("div", { key: `ray-${i}`, className: "cosmic-ray", style: { animationDuration: `30s`, animationDelay: `-${Math.random() * 20}s`, transform: `rotate(${i * 22.5 + Math.random() * 22.5}deg)` }, __source: { fileName: "", lineNumber: 110, columnNumber: 13 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "rainbow-trails", __source: { fileName: "", lineNumber: 122, columnNumber: 9 }, __self: this }, [ ...Array.from({ length: 20 }) ].map((_, i)=>/*#__PURE__*/ React.createElement("div", { key: `trail-${i}`, className: "rainbow-trail", style: { top: `${Math.random() * 100}%`, left: `${Math.random() * 100}%`, animationDuration: `8s`, animationDelay: `-${Math.random() * 5}s`, width: `${100 + Math.random() * 200}px`, filter: `blur(3px)`, opacity: 0.3 }, __source: { fileName: "", lineNumber: 124, columnNumber: 13 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "sparkle-bursts", __source: { fileName: "", lineNumber: 140, columnNumber: 9 }, __self: this }, [ ...Array.from({ length: 15 }) ].map((_, i)=>/*#__PURE__*/ React.createElement("div", { key: `burst-${i}`, className: "sparkle-burst", style: { top: `${Math.random() * 100}%`, left: `${Math.random() * 100}%`, animationDelay: `-${Math.random() * 10}s` }, __source: { fileName: "", lineNumber: 142, columnNumber: 13 }, __self: this })))), /*#__PURE__*/ React.createElement("div", { className: "relative max-w-2xl w-full text-center space-y-8 bg-white rounded-xl p-8 shadow-rainbow z-50", __source: { fileName: "", lineNumber: 155, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute top-0 left-0 -translate-x-1/2 -translate-y-1/2", __source: { fileName: "", lineNumber: 156, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-cog text-8xl text-purple-500 animate-spin-slow", __source: { fileName: "", lineNumber: 157, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "absolute bottom-0 right-0 translate-x-1/2 translate-y-1/2", __source: { fileName: "", lineNumber: 159, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-cog text-7xl text-pink-500 animate-spin-reverse-slow", __source: { fileName: "", lineNumber: 160, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex justify-center items-center space-x-4", __source: { fileName: "", lineNumber: 163, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-cog text-6xl md:text-8xl text-purple-600 animate-spin", __source: { fileName: "", lineNumber: 164, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("i", { className: "fas fa-cog text-5xl md:text-7xl text-pink-600 animate-spin-reverse", __source: { fileName: "", lineNumber: 165, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("i", { className: "fas fa-cog text-6xl md:text-8xl text-red-600 animate-spin", __source: { fileName: "", lineNumber: 166, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("h1", { className: `text-5xl md:text-7xl font-black bg-gradient-to-r from-purple-600 via-pink-600 to-red-600 bg-clip-text text-transparent transition-all duration-2000 ease-in-out transform ${isVisible ? "opacity-100" : "opacity-80"}`, __source: { fileName: "", lineNumber: 169, columnNumber: 9 }, __self: this }, "UNDER", /*#__PURE__*/ React.createElement("br", { __source: { fileName: "", lineNumber: 175, columnNumber: 11 }, __self: this }), "MAINTENANCE"), /*#__PURE__*/ React.createElement("p", { className: "text-2xl md:text-3xl font-bold text-purple-600 animate-bounce-slow", __source: { fileName: "", lineNumber: 179, columnNumber: 9 }, __self: this }, "🚀 MASSIVE UPGRADES IN PROGRESS! 🚀"), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 183, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-xl md:text-2xl font-bold text-pink-600 animate-pulse", __source: { fileName: "", lineNumber: 184, columnNumber: 11 }, __self: this }, "AI Creative Suite is getting a HUGE makeover!"), /*#__PURE__*/ React.createElement("p", { className: "text-lg md:text-xl font-bold text-red-600 animate-pulse delay-200", __source: { fileName: "", lineNumber: 187, columnNumber: 11 }, __self: this }, "We're cooking up some mind-blowing features! 🎨✨")), /*#__PURE__*/ React.createElement("div", { className: "flex justify-center items-center space-x-3", __source: { fileName: "", lineNumber: 192, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-4 h-4 bg-purple-500 rounded-full animate-bounce", __source: { fileName: "", lineNumber: 193, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "w-4 h-4 bg-pink-500 rounded-full animate-bounce delay-200", __source: { fileName: "", lineNumber: 194, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "w-4 h-4 bg-red-500 rounded-full animate-bounce delay-400", __source: { fileName: "", lineNumber: 195, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "w-4 h-4 bg-purple-500 rounded-full animate-bounce delay-600", __source: { fileName: "", lineNumber: 196, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "w-4 h-4 bg-pink-500 rounded-full animate-bounce delay-800", __source: { fileName: "", lineNumber: 197, columnNumber: 11 }, __self: this }))), gifs.map((gif, index)=>/*#__PURE__*/ React.createElement("div", { key: gif.id, className: "absolute transition-all duration-1000 ease-in-out", style: { top: `${Math.random() * 100}%`, left: `${Math.random() * 100}%`, transform: "translate(-50%, -50%)", animation: `float-${index % 12} ${20 + Math.random() * 10}s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite`, zIndex: Math.random() < 0.5 ? 10 : 30 }, __source: { fileName: "", lineNumber: 202, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: gif.url, alt: "Party GIF", className: "rounded-lg shadow-rainbow max-w-[100px] md:max-w-[150px]", style: { transform: `scale(${0.6 + Math.random() * 0.8})`, opacity: 0.85, willChange: "transform", backfaceVisibility: "hidden", perspective: "1000px", transition: "all 1s cubic-bezier(0.45, 0.05, 0.55, 0.95)" }, __source: { fileName: "", lineNumber: 213, columnNumber: 11 }, __self: this }))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 229, columnNumber: 7 }, __self: this }, ` @keyframes gradient-x { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .animate-gradient-x { background-size: 400% 400%; animation: gradient-x 60s ease infinite; } @keyframes spin-slow { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .animate-spin-slow { animation: spin-slow 30s linear infinite; } .animate-spin-reverse-slow { animation: spin-slow 35s linear infinite reverse; } .particle { position: absolute; background: white; border-radius: 50%; animation: float-particle 30s linear infinite; opacity: 0; transition: all 3s ease-in-out; } @keyframes float-particle { 0% { transform: translateY(100vh) translateX(-50vw); opacity: 0; } 10% { opacity: 0.3; } 90% { opacity: 0.3; } 100% { transform: translateY(-100vh) translateX(50vw); opacity: 0; } } .orb { position: absolute; border-radius: 50%; background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.1) 30%, transparent 70% ); filter: blur(5px); animation: float-orb 40s linear infinite; opacity: 0; transition: all 3s ease-in-out; } @keyframes float-orb { 0% { transform: translate(-50vw, -50vh) scale(0.8); opacity: 0; } 25% { transform: translate(0vw, 0vh) scale(1); opacity: 0.2; } 75% { transform: translate(25vw, 25vh) scale(1.2); opacity: 0.2; } 100% { transform: translate(50vw, 50vh) scale(0.8); opacity: 0; } } .cosmic-ray { position: absolute; top: 50%; left: 50%; width: 200%; height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent ); animation: rotate-ray 50s linear infinite; transform-origin: left center; opacity: 0; transition: all 3s ease-in-out; } @keyframes rotate-ray { 0% { transform: rotate(0deg) translateX(-50%); opacity: 0; } 25% { opacity: 0.2; } 75% { opacity: 0.2; } 100% { transform: rotate(360deg) translateX(-50%); opacity: 0; } } .rainbow-trail { position: absolute; height: 2px; background: linear-gradient(90deg, rgba(255, 0, 0, 0.3), rgba(255, 165, 0, 0.3), rgba(255, 255, 0, 0.3), rgba(0, 255, 0, 0.3), rgba(0, 255, 255, 0.3), rgba(0, 0, 255, 0.3), rgba(255, 0, 255, 0.3) ); filter: blur(4px); animation: trail-move 45s linear infinite; opacity: 0; transition: all 3s ease-in-out; } @keyframes trail-move { 0% { transform: translateX(-100vw) rotate(0deg); opacity: 0; } 10% { opacity: 0.3; } 90% { opacity: 0.3; } 100% { transform: translateX(200vw) rotate(360deg); opacity: 0; } } .sparkle-burst { position: absolute; width: 4px; height: 4px; background: white; border-radius: 50%; filter: blur(1px); animation: sparkle-burst 20s linear infinite; opacity: 0; transition: all 3s ease-in-out; } @keyframes sparkle-burst { 0% { transform: scale(1) translate(-50vw, -50vh); opacity: 0; } 25% { transform: scale(20) translate(-25vw, -25vh); opacity: 0.4; } 75% { transform: scale(20) translate(25vw, 25vh); opacity: 0.4; } 100% { transform: scale(1) translate(50vw, 50vh); opacity: 0; } } .shooting-star { position: absolute; width: 150px; height: 2px; background: linear-gradient(90deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.4) 50%, transparent ); filter: blur(1px); animation: shooting-star 8s linear infinite; opacity: 0; transition: all 3s ease-in-out; } @keyframes shooting-star { 0% { transform: translateX(-100vw) translateY(-100vh) rotate(45deg); opacity: 0; } 25% { opacity: 0.4; } 75% { opacity: 0.4; } 100% { transform: translateX(100vw) translateY(100vh) rotate(45deg); opacity: 0; } } @keyframes float-0 { 0% { transform: translate(-50%, -50%) translateY(0); } 50% { transform: translate(-50%, -50%) translateY(-40px); } 100% { transform: translate(-50%, -50%) translateY(0); } } @keyframes float-1 { 0% { transform: translate(-50%, -50%) translateX(0); } 50% { transform: translate(-50%, -50%) translateX(40px); } 100% { transform: translate(-50%, -50%) translateX(0); } } @keyframes float-2 { 0% { transform: translate(-50%, -50%) translateY(0) translateX(0); } 50% { transform: translate(-50%, -50%) translateY(-30px) translateX(30px); } 100% { transform: translate(-50%, -50%) translateY(0) translateX(0); } } @keyframes float-3 { 0% { transform: translate(-50%, -50%) translateY(0) translateX(0); } 50% { transform: translate(-50%, -50%) translateY(30px) translateX(-30px); } 100% { transform: translate(-50%, -50%) translateY(0) translateX(0); } } @keyframes float-4 { 0% { transform: translate(-50%, -50%) translateY(0) translateX(0); } 33% { transform: translate(-50%, -50%) translateY(-20px) translateX(20px); } 66% { transform: translate(-50%, -50%) translateY(20px) translateX(-20px); } 100% { transform: translate(-50%, -50%) translateY(0px); } } @keyframes float-5 { 0% { transform: translate(-50%, -50%) translateY(0px); } 33% { transform: translate(-50%, -50%) translateY(-30px); } 66% { transform: translate(-50%, -50%) translateY(30px); } 100% { transform: translate(-50%, -50%) translateY(0px); } } @keyframes float-6 { 0% { transform: translate(-50%, -50%) translateX(0px); } 33% { transform: translate(-50%, -50%) translateX(-30px); } 66% { transform: translate(-50%, -50%) translateX(30px); } 100% { transform: translate(-50%, -50%) translateX(0px); } } @keyframes float-7 { 0% { transform: translate(-50%, -50%) translateY(0px) translateX(0px); } 25% { transform: translate(-50%, -50%) translateY(-20px) translateX(20px); } 50% { transform: translate(-50%, -50%) translateY(0px) translateX(0px); } 75% { transform: translate(-50%, -50%) translateY(20px) translateX(-20px); } 100% { transform: translate(-50%, -50%) translateY(0px) translateX(0px); } } @keyframes float-8 { 0% { transform: translate(-50%, -50%) rotate(0deg) translateY(0px); } 50% { transform: translate(-50%, -50%) rotate(180deg) translateY(-30px); } } @keyframes float-9 { 0% { transform: translate(-50%, -50%) scale(1) translateX(0px); } 50% { transform: translate(-50%, -50%) scale(1.2) translateX(40px); } } @keyframes float-10 { 0% { transform: translate(-50%, -50%) translateY(0px) rotate(0deg); } 33% { transform: translate(-50%, -50%) translateY(-20px) rotate(120deg); } 66% { transform: translate(-50%, -50%) translateY(20px) rotate(240deg); } } @keyframes float-11 { 0% { transform: translate(-50%, -50%) scale(1) rotate(0deg); } 25% { transform: translate(-50%, -50%) scale(1.1) rotate(90deg); } 50% { transform: translate(-50%, -50%) scale(1) rotate(180deg); } 75% { transform: translate(-50%, -50%) scale(0.9) rotate(270deg); } } `)); }

UNDERMAINTENANCE

UNDER
MAINTENANCE