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 foodItems = [ { id: 1, image: 'https://ucarecdn.com/3c2a56f5-9ff5-42a8-9934-2c54c62a3958/', label: 'I want banana', color: '#FF4D4D' }, { id: 2, image: 'https://ucarecdn.com/48e9fe2f-135a-4fbb-9e7b-4e33014a9928/', label: 'Me like pancakes', color: '#4169E1' }, { id: 3, image: 'https://ucarecdn.com/87fbaad4-83af-4530-95e6-64ca90a93cea/', label: 'I need drink', color: '#FFD700' }, { id: 4, image: 'https://ucarecdn.com/9b3aa3a9-bcfc-4860-ba5e-39546ada1a9c/', label: 'This is an apple', color: '#50C878' }, { id: 5, image: 'https://ucarecdn.com/60b100e4-b13d-4aa7-98f8-91c1b7b13bf6/', label: 'I love chocolate', color: '#FF69B4' }, { id: 6, image: 'https://ucarecdn.com/e5cc9a2e-1a40-409a-b436-9af9af6a9e9a/', label: 'Me want burger', color: '#9370DB' }, { id: 7, image: 'https://ucarecdn.com/8002dd29-9862-48ff-99c8-bc24aa0cd80c/', label: 'I like pizza', color: '#40E0D0' }, { id: 8, image: 'https://ucarecdn.com/5bb5083e-682e-44a1-af3f-883bd58f21f7/', label: 'Give ice-cream', 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: "Food Menu", subtitle: "Choose • Communicate", __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: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "bg-white dark:bg-gray-900 relative w-full aspect-[16/9] overflow-hidden rounded-xl border-3 border-[#8A4FFF]", __source: { fileName: "", lineNumber: 66, columnNumber: 1 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "https://ucarecdn.com/0661bd9d-3320-47d5-b252-46e0ae378759/", alt: "Food", className: "absolute inset-0 w-full h-full object-cover", __source: { fileName: "", lineNumber: 67, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "bg-[#F8F7FF] border-2 border-[#8A4FFF] rounded-xl p-6 mt-8 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 Food"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col md:flex-row gap-6", __source: { fileName: "", lineNumber: 76, columnNumber: 11 }, __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: 95, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", value: customTitle, onChange: (e)=>setCustomTitle(e.target.value), placeholder: "Enter food name", className: "border-2 border-[#8A4FFF] rounded-lg p-2 bg-white", __source: { fileName: "", lineNumber: 96, columnNumber: 15 }, __self: this }), error && /*#__PURE__*/ React.createElement("p", { className: "text-red-500 text-sm", __source: { fileName: "", lineNumber: 103, 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: 104, columnNumber: 15 }, __self: this }, loading ? 'Uploading...' : 'Add Food')))), /*#__PURE__*/ React.createElement("h1", { className: "text-3xl md:text-4xl font-bold text-[#8A4FFF] mt-4 mb-8", __source: { fileName: "", lineNumber: 114, columnNumber: 1 }, __self: this }, "Food"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 md:grid-cols-4 gap-4 md:gap-6", __source: { fileName: "", lineNumber: 118, columnNumber: 9 }, __self: this }, foodItems.map((item)=>/*#__PURE__*/ React.createElement("div", { key: item.id, className: "relative bg-[#F8F7FF] border-2 rounded-xl p-6 flex flex-col items-center justify-between gap-6", style: { borderColor: item.color }, __source: { fileName: "", lineNumber: 120, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute top-3 left-3 w-2 h-2 rounded-full", style: { backgroundColor: item.color }, __source: { fileName: "", lineNumber: 125, columnNumber: 15 }, __self: this }), item.image ? /*#__PURE__*/ React.createElement("img", { src: item.image, alt: item.label, className: "w-20 h-20 object-contain", __source: { fileName: "", lineNumber: 127, columnNumber: 17 }, __self: this }) : /*#__PURE__*/ React.createElement("i", { className: `fas ${item.icon} text-3xl md:text-4xl`, style: { color: item.color }, __source: { fileName: "", lineNumber: 129, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "font-medium text-center w-full", style: { color: item.color }, __source: { fileName: "", lineNumber: 131, columnNumber: 15 }, __self: this }, item.label), /*#__PURE__*/ React.createElement("button", { onClick: ()=>speak(item.label), className: "w-full flex items-center justify-center gap-2 py-2 px-4 rounded-lg transition-all duration-200 hover:scale-105 active:scale-95", style: { backgroundColor: item.color, color: '#FFFFFF' }, __source: { fileName: "", lineNumber: 132, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-play text-sm", __source: { fileName: "", lineNumber: 140, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-center", __source: { fileName: "", lineNumber: 141, 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 flex flex-col items-center justify-between gap-6", style: { borderColor: card.color }, __source: { fileName: "", lineNumber: 146, 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: 151, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("img", { src: card.image, alt: card.name, className: "w-20 h-20 object-contain", __source: { fileName: "", lineNumber: 152, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "font-medium text-center w-full", style: { color: card.color }, __source: { fileName: "", lineNumber: 153, columnNumber: 15 }, __self: this }, card.name), /*#__PURE__*/ React.createElement("button", { onClick: ()=>speak(card.name), className: "w-full flex items-center justify-center gap-2 py-2 px-4 rounded-lg transition-all duration-200 hover:scale-105 active:scale-95", style: { backgroundColor: card.color, color: '#FFFFFF' }, __source: { fileName: "", lineNumber: 154, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-play text-sm", __source: { fileName: "", lineNumber: 162, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-center", __source: { fileName: "", lineNumber: 163, columnNumber: 17 }, __self: this }, "Play")))))), /*#__PURE__*/ React.createElement(AnimatedFooter, { __source: { fileName: "", lineNumber: 169, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 170, columnNumber: 1 }, __self: this }, ` @keyframes scaleOnHover { 0% { transform: scale(1); } 100% { transform: scale(1.05); } } @keyframes scaleOnActive { 0% { transform: scale(1.05); } 100% { transform: scale(0.95); } } `)); }