function BackToHomeButton({ text = "Back to Home", href = "/", className = "" }) { return /*#__PURE__*/ React.createElement("a", { href: href, className: `inline-flex items-center gap-2 bg-[#F8F7FF] border-2 border-[#8A4FFF] text-[#8A4FFF] px-6 py-3 rounded-xl font-medium transition-all duration-200 hover:scale-105 hover:bg-[#8A4FFF] hover:text-white ${className}`, __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-arrow-left", __source: { fileName: "", lineNumber: 7, columnNumber: 7 }, __self: this }), text); } function BackToHomeButtonStory() { return /*#__PURE__*/ React.createElement("div", { className: "p-8 space-y-4", __source: { fileName: "", lineNumber: 15, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 16, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-bold mb-2", __source: { fileName: "", lineNumber: 17, columnNumber: 9 }, __self: this }, "Default Button"), /*#__PURE__*/ React.createElement(BackToHomeButton, { __source: { fileName: "", lineNumber: 18, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 21, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-bold mb-2", __source: { fileName: "", lineNumber: 22, columnNumber: 9 }, __self: this }, "Custom Text Button"), /*#__PURE__*/ React.createElement(BackToHomeButton, { text: "Return Home", __source: { fileName: "", lineNumber: 23, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 26, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-bold mb-2", __source: { fileName: "", lineNumber: 27, columnNumber: 9 }, __self: this }, "Custom Link Button"), /*#__PURE__*/ React.createElement(BackToHomeButton, { href: "/dashboard", text: "Back to Dashboard", __source: { fileName: "", lineNumber: 28, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 31, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-bold mb-2", __source: { fileName: "", lineNumber: 32, columnNumber: 9 }, __self: this }, "With Additional Classes"), /*#__PURE__*/ React.createElement(BackToHomeButton, { className: "shadow-lg", __source: { fileName: "", lineNumber: 33, columnNumber: 9 }, __self: this }))); } function AnimatedHeader({ title = "AutisticAudio", subtitle = "Learn • Communicate" }) { return /*#__PURE__*/ React.createElement("header", { className: "flex items-center justify-between py-6", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-3", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-[#8A4FFF] text-2xl logo-container", __source: { fileName: "", lineNumber: 5, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-puzzle-piece relative float-animation", __source: { fileName: "", lineNumber: 6, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-star absolute text-sm top-0 right-0 twinkle-animation", __source: { fileName: "", lineNumber: 7, columnNumber: 13 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 10, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl md:text-3xl font-bold flex", __source: { fileName: "", lineNumber: 11, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "gradient-text", __source: { fileName: "", lineNumber: 12, columnNumber: 13 }, __self: this }, title)), /*#__PURE__*/ React.createElement("p", { className: "text-[#8A4FFF] text-sm md:text-base slide-up-fade", __source: { fileName: "", lineNumber: 14, columnNumber: 11 }, __self: this }, subtitle))), /*#__PURE__*/ React.createElement("button", { className: "text-[#8A4FFF] p-2 rounded-full share-button", __source: { fileName: "", lineNumber: 19, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-share-alt text-xl", __source: { fileName: "", lineNumber: 20, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 23, columnNumber: 7 }, __self: this }, ` @keyframes enhancedFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } } @keyframes multicolorTwinkle { 0% { color: gold; transform: scale(1); opacity: 1; } 33% { color: #8A4FFF; transform: scale(1.2); opacity: 0.8; } 66% { color: #4169E1; transform: scale(0.8); opacity: 0.9; } 100% { color: gold; transform: scale(1); opacity: 1; } } @keyframes titleGradient { 0% { background-position: 0% 50%; } 100% { background-position: 300% 50%; } } @keyframes dotPulse { 0% { color: #8A4FFF; } 50% { color: #4169E1; } 100% { color: #8A4FFF; } } @keyframes enhancedSlideUpFade { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } } @keyframes playfulSpin { 0% { transform: rotate(0deg) scale(1); } 50% { transform: rotate(180deg) scale(1.2); } 100% { transform: rotate(360deg) scale(1); } } .float-animation { animation: enhancedFloat 4s ease-in-out infinite; display: inline-block; } .twinkle-animation { animation: multicolorTwinkle 3s ease-in-out infinite; } .logo-container { position: relative; transition: all 0.3s ease; } .logo-container:hover { transform: rotate(10deg); } .logo-container:hover::before { content: ''; position: absolute; inset: -5px; background: linear-gradient(45deg, #FF0000, #FF7F00, #FFFF00, #00FF00, #0000FF, #4B0082, #8F00FF); border-radius: 50%; z-index: -1; animation: titleGradient 3s linear infinite; filter: blur(8px); opacity: 0.7; } .gradient-text { background: linear-gradient(90deg, #8A4FFF, #FF7F00, #4169E1, #00FF00, #8A4FFF, #8A4FFF); background-size: 300% 100%; animation: titleGradient 8s linear infinite; background-clip: text; -webkit-background-clip: text; color: transparent; transition: all 0.3s ease; } .gradient-text:hover { filter: brightness(1.3) drop-shadow(0 0 12px currentColor); } .slide-up-fade { animation: enhancedSlideUpFade 1s ease-out forwards; } .slide-up-fade span { animation: dotPulse 2s infinite; } .share-button { position: relative; overflow: hidden; transition: all 0.3s ease; } .share-button::before { content: ''; position: absolute; inset: -5px; background: linear-gradient(45deg, #8A4FFF, #4169E1, #FF7F00, #8A4FFF); opacity: 0; transition: opacity 0.3s ease; border-radius: inherit; z-index: -1; } .share-button:hover::before { opacity: 0.2; animation: titleGradient 2s linear infinite; } .share-button:hover i { animation: playfulSpin 1s ease-in-out; } @media (prefers-color-scheme: dark) { .gradient-text:hover { filter: brightness(1.4) drop-shadow(0 0 15px currentColor); } } `)); } function AnimatedHeaderStory() { return /*#__PURE__*/ React.createElement("div", { className: "space-y-8 p-4", __source: { fileName: "", lineNumber: 154, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "border rounded p-4", __source: { fileName: "", lineNumber: 155, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-bold mb-4", __source: { fileName: "", lineNumber: 156, columnNumber: 9 }, __self: this }, "Default Header"), /*#__PURE__*/ React.createElement(AnimatedHeader, { __source: { fileName: "", lineNumber: 157, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "border rounded p-4", __source: { fileName: "", lineNumber: 160, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-bold mb-4", __source: { fileName: "", lineNumber: 161, columnNumber: 9 }, __self: this }, "Custom Title Header"), /*#__PURE__*/ React.createElement(AnimatedHeader, { title: "Custom Title", subtitle: "Custom • Subtitle", __source: { fileName: "", lineNumber: 162, columnNumber: 9 }, __self: this }))); } function AnimatedFooter() { const navLinks = [ { label: 'About', href: '#' }, { label: 'Privacy', href: '#' }, { label: 'Terms', href: '#' }, { label: 'Contact', href: '#' } ]; const socialLinks = [ { icon: 'fa-discord', href: '#' }, { icon: 'fa-x-twitter', href: '#' }, { icon: 'fa-instagram', href: '#' } ]; return /*#__PURE__*/ React.createElement("div", { className: "fixed bottom-0 left-0 right-0 h-[60px] bg-white dark:bg-gray-900 border-t border-[#8A4FFF] z-50", __source: { fileName: "", lineNumber: 16, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "h-full max-w-7xl mx-auto px-4 flex items-center justify-between", __source: { fileName: "", lineNumber: 17, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-2", __source: { fileName: "", lineNumber: 18, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-[#8A4FFF] text-base", __source: { fileName: "", lineNumber: 19, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-puzzle-piece", __source: { fileName: "", lineNumber: 20, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col justify-center", __source: { fileName: "", lineNumber: 22, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "gradient-text text-sm font-bold", __source: { fileName: "", lineNumber: 23, columnNumber: 13 }, __self: this }, "AutisticAudio"), /*#__PURE__*/ React.createElement("span", { className: "text-[#8A4FFF] text-[10px]", __source: { fileName: "", lineNumber: 24, columnNumber: 13 }, __self: this }, "© 2025"))), /*#__PURE__*/ React.createElement("nav", { className: "hidden md:flex items-center", __source: { fileName: "", lineNumber: 28, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-1", __source: { fileName: "", lineNumber: 29, columnNumber: 11 }, __self: this }, navLinks.map((link, index)=>/*#__PURE__*/ React.createElement("div", { key: link.label, className: "flex items-center", __source: { fileName: "", lineNumber: 31, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: link.href, className: "text-[#8A4FFF] hover:text-[#4169E1] text-xs px-2", __source: { fileName: "", lineNumber: 32, columnNumber: 17 }, __self: this }, link.label), index < navLinks.length - 1 && /*#__PURE__*/ React.createElement("span", { className: "text-[#8A4FFF] text-xs", __source: { fileName: "", lineNumber: 36, columnNumber: 19 }, __self: this }, "•"))))), /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-2", __source: { fileName: "", lineNumber: 43, columnNumber: 9 }, __self: this }, socialLinks.map((link)=>/*#__PURE__*/ React.createElement("a", { key: link.icon, href: link.href, className: "text-[#8A4FFF] text-sm p-1", __source: { fileName: "", lineNumber: 45, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fab ${link.icon}`, __source: { fileName: "", lineNumber: 50, columnNumber: 15 }, __self: this }))))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 56, columnNumber: 7 }, __self: this }, ` .gradient-text { background: linear-gradient(90deg, #8A4FFF, #4169E1, #8A4FFF); background-size: 300% 100%; background-clip: text; -webkit-background-clip: text; color: transparent; } `)); } function AnimatedFooterStory() { return /*#__PURE__*/ React.createElement("div", { className: "space-y-8 p-4", __source: { fileName: "", lineNumber: 71, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "border rounded p-4", __source: { fileName: "", lineNumber: 72, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-bold mb-4", __source: { fileName: "", lineNumber: 73, columnNumber: 9 }, __self: this }, "Footer Component"), /*#__PURE__*/ React.createElement(AnimatedFooter, { __source: { fileName: "", lineNumber: 74, columnNumber: 9 }, __self: this }))); } function MainComponent() { const [speaking, setSpeaking] = useState(false); const [selectedActivity, setSelectedActivity] = useState(null); const [timer, setTimer] = useState(300); const [isTimerRunning, setIsTimerRunning] = useState(false); const [breathPhase, setBreathPhase] = useState('inhale'); const activities = [ { id: 1, name: 'Deep Breathing', icon: 'fa-wind', color: '#4169E1', description: 'Follow the circle to breathe' }, { id: 2, name: 'Ocean Waves', icon: 'fa-water', color: '#40E0D0', description: 'Watch the flow' }, { id: 3, name: 'Cosmic Simulation', icon: 'fa-stars', color: '#8A4FFF', description: 'Cosmic movements' }, { id: 4, name: 'Meditation Timer', icon: 'fa-clock', color: '#FF69B4', description: 'Set your meditation time' }, { id: 5, name: 'Earth\'s Rotation', icon: 'fa-globe', color: '#50C878', description: 'Watch the world turn' }, { id: 6, name: 'Disco Dude', icon: 'fa-music', color: '#FFD700', description: 'Dance with the disco dude' } ]; const [currentImageIndex, setCurrentImageIndex] = useState(0); const minionImages = [ "https://ucarecdn.com/1892feae-82d3-401d-b14f-93e0bba5dc47/", "https://ucarecdn.com/856fe1f4-be53-436e-a009-f2e778a8d003/", "https://ucarecdn.com/e9e43b92-a37c-4001-8c37-9df9c2760ace/", "https://ucarecdn.com/b0319983-9606-432f-a53b-cdb8feec15ce/", "https://ucarecdn.com/7b50b394-5c50-457a-a4c4-39c63e3a4429/" ]; useEffect(()=>{ let interval; if (isTimerRunning && timer > 0) { interval = setInterval(()=>{ setTimer((prev)=>prev - 1); }, 1000); } else if (timer === 0) { setIsTimerRunning(false); } return ()=>clearInterval(interval); }, [ isTimerRunning, timer ]); useEffect(()=>{ let breathInterval; if (selectedActivity?.name === 'Deep Breathing') { breathInterval = setInterval(()=>{ setBreathPhase((prev)=>prev === 'inhale' ? 'hold' : prev === 'hold' ? 'exhale' : 'inhale'); }, breathPhase === 'hold' ? 3000 : 4000); } return ()=>clearInterval(breathInterval); }, [ selectedActivity, breathPhase ]); useEffect(()=>{ let interval; if (selectedActivity?.name === 'Disco Dude') { interval = setInterval(()=>{ setCurrentImageIndex((prev)=>(prev + 1) % minionImages.length); }, 1000); } return ()=>clearInterval(interval); }, [ selectedActivity ]); const formatTime = (seconds)=>{ const mins = Math.floor(seconds / 60); const secs = seconds % 60; return `${mins}:${secs.toString().padStart(2, '0')}`; }; const handleActivitySelect = (activity)=>{ setSelectedActivity(activity); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-white dark:bg-gray-900 pb-[60px]", __source: { fileName: "", lineNumber: 66, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex-1 px-4 md:px-8", __source: { fileName: "", lineNumber: 67, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement(AnimatedHeader, { title: "Calm Zone", subtitle: "Relax • Breathe • Center", __source: { fileName: "", lineNumber: 68, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "mt-8 mb-4", __source: { fileName: "", lineNumber: 69, columnNumber: 1 }, __self: this }, /*#__PURE__*/ React.createElement(BackToHomeButton, { __source: { fileName: "", lineNumber: 70, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "bg-white dark:bg-gray-900", __source: { fileName: "", lineNumber: 72, columnNumber: 1 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "https://ucarecdn.com/0661bd9d-3320-47d5-b252-46e0ae378759/", alt: "Peaceful meditation scene", className: "w-full h-auto rounded-xl border-3 border-[#8A4FFF]", __source: { fileName: "", lineNumber: 73, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 md:grid-cols-4 gap-4 md:gap-6 mt-8", __source: { fileName: "", lineNumber: 79, columnNumber: 1 }, __self: this }, activities.map((activity)=>/*#__PURE__*/ React.createElement("button", { key: activity.id, onClick: ()=>handleActivitySelect(activity), className: `relative bg-[#F8F7FF] border-2 rounded-xl p-6 h-[200px] flex flex-col items-center justify-center transition-all duration-300 hover:scale-105 ${selectedActivity?.id === activity.id ? 'border-4' : ''}`, style: { borderColor: activity.color }, __source: { fileName: "", lineNumber: 81, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute top-3 left-3 w-2 h-2 rounded-full", style: { backgroundColor: activity.color }, __source: { fileName: "", lineNumber: 89, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("i", { className: `fas ${activity.icon} text-4xl mb-4`, style: { color: activity.color }, __source: { fileName: "", lineNumber: 90, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-medium text-center", style: { color: activity.color }, __source: { fileName: "", lineNumber: 91, columnNumber: 15 }, __self: this }, activity.name), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-600 mt-2 text-center", __source: { fileName: "", lineNumber: 94, columnNumber: 15 }, __self: this }, activity.description)))), /*#__PURE__*/ React.createElement("div", { className: "mt-8 bg-[#F8F7FF] border-2 border-[#8A4FFF] rounded-xl p-6 h-[400px] flex items-center justify-center", __source: { fileName: "", lineNumber: 99, columnNumber: 9 }, __self: this }, selectedActivity?.name === 'Deep Breathing' && /*#__PURE__*/ React.createElement("div", { className: "relative flex items-center justify-center", __source: { fileName: "", lineNumber: 101, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `w-48 h-48 rounded-full border-4 border-[#4169E1] absolute transition-all duration-[4000ms] ease-in-out ${breathPhase === 'inhale' ? 'scale-150 opacity-50' : breathPhase === 'exhale' ? 'scale-75 opacity-100' : ''}`, __source: { fileName: "", lineNumber: 102, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "text-[#4169E1] text-xl font-medium", __source: { fileName: "", lineNumber: 107, columnNumber: 15 }, __self: this }, breathPhase === 'inhale' ? 'Breathe In' : breathPhase === 'hold' ? 'Hold' : 'Breathe Out')), selectedActivity?.name === 'Ocean Waves' && /*#__PURE__*/ React.createElement("div", { className: "w-full h-full flex items-center justify-center", __source: { fileName: "", lineNumber: 114, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "https://media.giphy.com/media/xati8H6cuIYxi/giphy.gif?cid=790b7611yx7qcjfygmtwd9skwocd51ydiec8849gxm27ajhs&ep=v1_gifs_search&rid=giphy.gif&ct=g", alt: "Ocean Waves", className: "w-full h-full object-cover rounded-lg", __source: { fileName: "", lineNumber: 115, columnNumber: 5 }, __self: this })), selectedActivity?.name === 'Cosmic Simulation' && /*#__PURE__*/ React.createElement("div", { className: "w-full h-full flex items-center justify-center", __source: { fileName: "", lineNumber: 124, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExbm1uYmNzOWlkYmVzYm9ueDZqaDZiYjN6Z3N2NXZob2d6bG50aTd2MSZlcD12MV9zdGlja2Vyc19zZWFyY2gmY3Q9cw/XYsjIc9BTfRSWk9E6y/giphy.gif", alt: "Cosmic Simulation", className: "w-full h-full object-contain rounded-lg", __source: { fileName: "", lineNumber: 125, columnNumber: 17 }, __self: this })), selectedActivity?.name === 'Meditation Timer' && /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 134, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-6xl font-bold text-[#8A4FFF] mb-6", __source: { fileName: "", lineNumber: 135, columnNumber: 15 }, __self: this }, formatTime(timer)), /*#__PURE__*/ React.createElement("div", { className: "space-x-4", __source: { fileName: "", lineNumber: 136, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setTimer((prev)=>prev + 60), className: "bg-[#8A4FFF] text-white px-4 py-2 rounded-lg hover:bg-[#7A3FEF] transition-colors", __source: { fileName: "", lineNumber: 137, columnNumber: 17 }, __self: this }, "+1 Min"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>{ setIsTimerRunning(!isTimerRunning); if (timer === 0) setTimer(300); }, className: "bg-[#FF69B4] text-white px-6 py-2 rounded-lg hover:bg-[#FF4DA6] transition-colors", __source: { fileName: "", lineNumber: 143, columnNumber: 17 }, __self: this }, isTimerRunning ? 'Pause' : timer === 0 ? 'Reset' : 'Start'))), selectedActivity?.name === 'Earth\'s Rotation' && /*#__PURE__*/ React.createElement("div", { className: "w-full h-full flex items-center justify-center", __source: { fileName: "", lineNumber: 157, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "https://ucarecdn.com/08706be2-1a79-48c4-9fe8-b743f72f43a9/", alt: "Earth's Rotation", className: "w-full h-full object-contain rounded-lg", __source: { fileName: "", lineNumber: 158, columnNumber: 5 }, __self: this })), selectedActivity?.name === 'Disco Dude' && /*#__PURE__*/ React.createElement("div", { className: "w-full h-full flex items-center justify-center relative overflow-hidden disco-container", __source: { fileName: "", lineNumber: 167, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "disco-light light-1", __source: { fileName: "", lineNumber: 168, columnNumber: 3 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "disco-light light-2", __source: { fileName: "", lineNumber: 169, columnNumber: 3 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "disco-light light-3", __source: { fileName: "", lineNumber: 170, columnNumber: 3 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "disco-light light-4", __source: { fileName: "", lineNumber: 171, columnNumber: 3 }, __self: this }), /*#__PURE__*/ React.createElement("img", { src: minionImages[currentImageIndex], alt: "Dancing Minion", className: "w-64 h-64 object-contain rounded-lg animate-bounce relative z-10", __source: { fileName: "", lineNumber: 173, columnNumber: 3 }, __self: this })))), /*#__PURE__*/ React.createElement(AnimatedFooter, { __source: { fileName: "", lineNumber: 182, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 183, columnNumber: 1 }, __self: this }, ` @keyframes twinkle { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.3; transform: scale(0.8); } } .animate-twinkle { animation: twinkle 2s ease-in-out infinite; } .animate-bounce { animation: bounce 1s infinite; } @keyframes bounce { 0%, 100% { transform: translateY(-5%); } 50% { transform: translateY(0); } } .disco-container { background: rgba(0, 0, 0, 0.8); border-radius: 1rem; } .disco-light { position: absolute; width: 150px; height: 150px; border-radius: 50%; filter: blur(60px); opacity: 0.6; mix-blend-mode: screen; animation: moveLight 3s infinite; } .light-1 { background: #ff0080; top: 20%; left: 20%; animation-delay: 0s; } .light-2 { background: #00ff00; top: 20%; right: 20%; animation-delay: 0.75s; } .light-3 { background: #ff8800; bottom: 20%; left: 20%; animation-delay: 1.5s; } .light-4 { background: #0088ff; bottom: 20%; right: 20%; animation-delay: 2.25s; } @keyframes moveLight { 0% { transform: translate(0, 0) scale(1); } 25% { transform: translate(50px, 50px) scale(1.2); } 50% { transform: translate(0, 100px) scale(1); } 75% { transform: translate(-50px, 50px) scale(1.2); } 100% { transform: translate(0, 0) scale(1); } } `)); }