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 [customCards, setCustomCards] = useState([]); const [previewImage, setPreviewImage] = useState(null); const [customTitle, setCustomTitle] = useState(''); const [upload, { loading }] = useUpload(); const [error, setError] = useState(null); const animals = [ { id: 1, image: 'https://ucarecdn.com/6ff998c3-5faa-43dc-8b0f-476f5c19899d/', label: 'Dog', color: '#FF4D4D' }, { id: 2, image: 'https://ucarecdn.com/c78d0960-9283-4914-943a-0be6316fb7d6/', label: 'Cat', color: '#4169E1' }, { id: 3, image: 'https://ucarecdn.com/d5c508e1-6f8c-4675-bd4c-427b63bea8fa/', label: 'Fish', color: '#FFD700' }, { id: 4, image: 'https://ucarecdn.com/45643010-eec5-49eb-8f81-aead38bce8cc/', label: 'Horse', color: '#50C878' }, { id: 5, image: 'https://ucarecdn.com/794d0dfc-a641-4538-a47e-3763961cd84e/', label: 'Fox', color: '#FF69B4' }, { id: 6, image: 'https://ucarecdn.com/c5e8432d-a16c-407e-872e-b0611958c92e/', label: 'Cow', color: '#9370DB' }, { id: 7, image: 'https://ucarecdn.com/15559b68-bee1-4745-b824-e25be7516081/', label: 'Chicken', color: '#40E0D0' }, { id: 8, image: 'https://ucarecdn.com/d9b708b6-c12a-4d54-9710-3d3fe2802c59/', label: 'Badger', color: '#BA55D3' } ]; const speak = useCallback((text)=>{ if (typeof window !== 'undefined' && 'speechSynthesis' in window) { if (speaking) { window.speechSynthesis.cancel(); } const utterance = new SpeechSynthesisUtterance(text); utterance.rate = 0.9; utterance.pitch = 1; utterance.onstart = ()=>setSpeaking(true); utterance.onend = ()=>setSpeaking(false); window.speechSynthesis.speak(utterance); } }, [ speaking ]); const handleImageUpload = async (file)=>{ try { const { url, error: uploadError } = await upload({ file }); if (uploadError) { throw new Error(uploadError); } setPreviewImage(url); setError(null); } catch (err) { console.error(err); setError('Failed to upload image'); } }; const handleCreateCard = ()=>{ if (previewImage && customTitle.trim()) { const newCard = { id: Date.now(), name: customTitle, image: previewImage, color: '#8A4FFF' }; setCustomCards([ ...customCards, newCard ]); setPreviewImage(null); setCustomTitle(''); setError(null); } }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-white dark:bg-gray-900 pb-[60px]", __source: { fileName: "", lineNumber: 60, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex-1 px-4 md:px-8", __source: { fileName: "", lineNumber: 61, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement(AnimatedHeader, { title: "Animals", subtitle: "Learn • Listen • Play", __source: { fileName: "", lineNumber: 62, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "mt-8 mb-4", __source: { fileName: "", lineNumber: 63, columnNumber: 1 }, __self: this }, /*#__PURE__*/ React.createElement(BackToHomeButton, { __source: { fileName: "", lineNumber: 64, columnNumber: 3 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "bg-white dark:bg-gray-900", __source: { fileName: "", lineNumber: 66, columnNumber: 1 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "https://ucarecdn.com/0661bd9d-3320-47d5-b252-46e0ae378759/", alt: "Animals", className: "w-full h-auto rounded-xl border-3 border-[#8A4FFF]", __source: { fileName: "", lineNumber: 67, columnNumber: 3 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "bg-[#F8F7FF] border-2 border-[#8A4FFF] rounded-xl p-6 mt-4 mb-8", __source: { fileName: "", lineNumber: 74, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-bold text-[#8A4FFF] mb-4", __source: { fileName: "", lineNumber: 75, columnNumber: 11 }, __self: this }, "Add Custom Animal"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col md:flex-row gap-6", __source: { fileName: "", lineNumber: 76, columnNumber: 1 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex-1", __source: { fileName: "", lineNumber: 77, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative border-2 border-dashed border-[#8A4FFF] rounded-lg p-4 text-center h-[200px] flex items-center justify-center", __source: { fileName: "", lineNumber: 78, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "file", accept: "image/*", onChange: (e)=>e.target.files?.[0] && handleImageUpload(e.target.files[0]), className: "absolute inset-0 w-full h-full opacity-0 cursor-pointer", __source: { fileName: "", lineNumber: 79, columnNumber: 17 }, __self: this }), previewImage ? /*#__PURE__*/ React.createElement("img", { src: previewImage, alt: "Preview", className: "max-h-full max-w-full object-contain", __source: { fileName: "", lineNumber: 86, columnNumber: 19 }, __self: this }) : /*#__PURE__*/ React.createElement("div", { className: "text-[#8A4FFF]", __source: { fileName: "", lineNumber: 88, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-cloud-upload-alt text-3xl mb-2", __source: { fileName: "", lineNumber: 89, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 90, columnNumber: 21 }, __self: this }, "Click or drag image here")))), /*#__PURE__*/ React.createElement("div", { className: "flex-1 flex flex-col gap-4", __source: { fileName: "", lineNumber: 96, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", value: customTitle, onChange: (e)=>setCustomTitle(e.target.value), placeholder: "Enter animal name", className: "border-2 border-[#8A4FFF] rounded-lg p-2 bg-white", __source: { fileName: "", lineNumber: 97, columnNumber: 15 }, __self: this }), error && /*#__PURE__*/ React.createElement("p", { className: "text-red-500 text-sm", __source: { fileName: "", lineNumber: 104, columnNumber: 25 }, __self: this }, error), /*#__PURE__*/ React.createElement("button", { onClick: handleCreateCard, disabled: !previewImage || !customTitle.trim() || loading, className: "bg-[#8A4FFF] text-white rounded-lg py-2 px-4 hover:bg-[#4169E1] transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed", __source: { fileName: "", lineNumber: 105, columnNumber: 15 }, __self: this }, loading ? 'Uploading...' : 'Add Animal')))), /*#__PURE__*/ React.createElement("h2", { className: "text-3xl md:text-4xl font-bold text-[#8A4FFF] mt-4 mb-8", __source: { fileName: "", lineNumber: 115, columnNumber: 9 }, __self: this }, "Animals"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 md:grid-cols-4 gap-4 md:gap-6", __source: { fileName: "", lineNumber: 119, columnNumber: 9 }, __self: this }, animals.map((animal)=>/*#__PURE__*/ React.createElement("div", { key: animal.id, className: "relative bg-[#F8F7FF] border-2 rounded-xl p-6 h-[275px] md:h-[300px] flex flex-col", style: { borderColor: animal.color }, __source: { fileName: "", lineNumber: 121, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute top-3 left-3 w-2 h-2 rounded-full", style: { backgroundColor: animal.color }, __source: { fileName: "", lineNumber: 126, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex-1 flex flex-col items-center gap-6", __source: { fileName: "", lineNumber: 128, columnNumber: 15 }, __self: this }, animal.image ? /*#__PURE__*/ React.createElement("img", { src: animal.image, alt: animal.label, className: "w-24 h-24 object-contain", __source: { fileName: "", lineNumber: 130, columnNumber: 19 }, __self: this }) : /*#__PURE__*/ React.createElement("i", { className: `fas ${animal.icon} text-3xl md:text-4xl`, style: { color: animal.color }, __source: { fileName: "", lineNumber: 132, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "font-medium text-center", style: { color: animal.color }, __source: { fileName: "", lineNumber: 134, columnNumber: 17 }, __self: this }, animal.label)), /*#__PURE__*/ React.createElement("button", { onClick: ()=>speak(animal.label), className: "w-full mt-auto flex items-center justify-center gap-2 py-3 px-4 rounded-lg transition-all duration-200 hover:scale-105 active:scale-95", style: { backgroundColor: animal.color, color: '#FFFFFF' }, __source: { fileName: "", lineNumber: 137, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-play text-sm", __source: { fileName: "", lineNumber: 145, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-center", __source: { fileName: "", lineNumber: 146, columnNumber: 17 }, __self: this }, "Play")))), customCards.map((card)=>/*#__PURE__*/ React.createElement("div", { key: card.id, className: "relative bg-[#F8F7FF] border-2 rounded-xl p-6 h-[275px] md:h-[300px] flex flex-col", style: { borderColor: card.color }, __source: { fileName: "", lineNumber: 152, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute top-3 left-3 w-2 h-2 rounded-full", style: { backgroundColor: card.color }, __source: { fileName: "", lineNumber: 157, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex-1 flex flex-col items-center gap-6", __source: { fileName: "", lineNumber: 159, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: card.image, alt: card.name, className: "w-24 h-24 object-contain", __source: { fileName: "", lineNumber: 160, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "font-medium text-center", style: { color: card.color }, __source: { fileName: "", lineNumber: 161, columnNumber: 17 }, __self: this }, card.name)), /*#__PURE__*/ React.createElement("button", { onClick: ()=>speak(card.name), className: "w-full mt-auto flex items-center justify-center gap-2 py-3 px-4 rounded-lg transition-all duration-200 hover:scale-105 active:scale-95", style: { backgroundColor: card.color, color: '#FFFFFF' }, __source: { fileName: "", lineNumber: 164, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-play text-sm", __source: { fileName: "", lineNumber: 172, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-center", __source: { fileName: "", lineNumber: 173, columnNumber: 17 }, __self: this }, "Play")))))), /*#__PURE__*/ React.createElement(AnimatedFooter, { __source: { fileName: "", lineNumber: 179, columnNumber: 7 }, __self: this })); }