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 [isHovered, setIsHovered] = useState(null); const menuItems = [ { id: 1, icon: 'fa-utensils', label: 'Food', href: '/food' }, { id: 2, icon: 'fa-person-running', label: 'Activities', href: '/activities' }, { id: 3, icon: 'fa-heart', label: 'Feelings', href: '/feelings' }, { id: 4, icon: 'fa-shower', label: 'Hygiene', href: '/hygiene' }, { id: 5, icon: 'fa-calendar-day', label: 'Daily Planner', href: '/daily-planner' }, { id: 6, icon: 'fa-gamepad', label: 'Play', href: '/play' }, { id: 7, icon: 'fa-calculator', label: 'Numbers', href: '/numbers' }, { id: 8, icon: 'fa-shapes', label: 'Shapes', href: '/shapes' }, { id: 9, icon: 'fa-paw', label: 'Animals', href: '/animals' }, { id: 10, icon: 'fa-cloud', label: 'Calm Zone', href: '/calm-zone' }, { id: 11, icon: 'fa-volume-up', label: 'Desensitisation', href: '/desensitisation' } ]; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-white dark:bg-gray-900 pb-[60px]", __source: { fileName: "", lineNumber: 18, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("main", { className: "flex-1", __source: { fileName: "", lineNumber: 19, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex-1 px-4 md:px-8", __source: { fileName: "", lineNumber: 20, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement(AnimatedHeader, { __source: { fileName: "", lineNumber: 21, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "bg-white dark:bg-gray-900 mt-8", __source: { fileName: "", lineNumber: 22, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "https://ucarecdn.com/0661bd9d-3320-47d5-b252-46e0ae378759/", alt: "Hero", className: "w-full h-auto rounded-xl border-3 border-[#8A4FFF]", __source: { fileName: "", lineNumber: 23, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("h2", { className: "text-3xl md:text-4xl font-bold text-[#8A4FFF] mt-12 mb-8", __source: { fileName: "", lineNumber: 29, columnNumber: 11 }, __self: this }, "Home"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 md:grid-cols-4 gap-4 md:gap-6", __source: { fileName: "", lineNumber: 32, columnNumber: 11 }, __self: this }, menuItems.map((item)=>/*#__PURE__*/ React.createElement("a", { href: item.href, key: item.id, className: "relative bg-[#F8F7FF] border-2 border-[#8A4FFF] rounded-xl p-6 md:p-8 flex flex-col items-center justify-between min-h-[160px] transition-transform duration-200 hover:scale-105", onMouseEnter: ()=>setIsHovered(item.id), onMouseLeave: ()=>setIsHovered(null), __source: { fileName: "", lineNumber: 34, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute top-3 left-3 w-2 h-2 rounded-full bg-[#8A4FFF]", __source: { fileName: "", lineNumber: 41, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("i", { className: `fas ${item.icon} text-3xl md:text-4xl text-[#8A4FFF]`, __source: { fileName: "", lineNumber: 42, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-[#4169E1] font-medium text-center", __source: { fileName: "", lineNumber: 43, columnNumber: 17 }, __self: this }, item.label)))))), /*#__PURE__*/ React.createElement(AnimatedFooter, { __source: { fileName: "", lineNumber: 49, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 51, columnNumber: 7 }, __self: this }, ` @keyframes particles { 0% { transform: translate(0, 0) scale(1); opacity: 0; } 50% { opacity: 1; } 100% { transform: translate(var(--tx), var(--ty)) scale(0); opacity: 0; } } @keyframes shimmer { 0% { opacity: 0.6; } 50% { opacity: 1; } 100% { opacity: 0.6; } } `)); }