function MainComponent() { const [isClicked, setIsClicked] = React.useState(false); const buttonAnimationStyle = isClicked ? { animation: 'clickEffect 0.5s forwards' } : {}; function handleButtonClick() { setIsClicked(true); } React.useEffect(()=>{ if (isClicked) { const timeoutId = setTimeout(()=>{ setIsClicked(false); }, 500); return ()=>clearTimeout(timeoutId); } }, [ isClicked ]); const headerStyle = { textShadow: '2px 2px 8px rgba(0, 0, 0, 0.8)' }; return /*#__PURE__*/ React.createElement("div", { className: "font-roboto bg-[#f8f8f8] min-h-screen", __source: { fileName: "", lineNumber: 19, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "bg-[#1a1a1a] text-white py-4", __source: { fileName: "", lineNumber: 20, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "container mx-auto flex justify-between items-center px-6", __source: { fileName: "", lineNumber: 21, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 22, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "images/small-logo.png", alt: "Small MUSIQUE Logo", className: "h-8 mr-3", __source: { fileName: "", lineNumber: 23, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-extrabold", style: headerStyle, __source: { fileName: "", lineNumber: 24, columnNumber: 13 }, __self: this }, "MUSIQUE")), /*#__PURE__*/ React.createElement("nav", { __source: { fileName: "", lineNumber: 26, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("ul", { className: "flex space-x-4", __source: { fileName: "", lineNumber: 27, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 28, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/home", className: "hover:text-[#ff4500]", __source: { fileName: "", lineNumber: 28, columnNumber: 19 }, __self: this }, "Home")), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 29, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/about", className: "hover:text-[#ff4500]", __source: { fileName: "", lineNumber: 29, columnNumber: 19 }, __self: this }, "About Us")), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 30, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/contact", className: "hover:text-[#ff4500]", __source: { fileName: "", lineNumber: 30, columnNumber: 19 }, __self: this }, "About MUSIQUE")), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 31, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/lyrics", className: "hover:text-[#ff4500]", __source: { fileName: "", lineNumber: 31, columnNumber: 19 }, __self: this }, "Lyrics")))))), /*#__PURE__*/ React.createElement("main", { className: "container mx-auto px-6 py-8 bg-[#fff]", __source: { fileName: "", lineNumber: 36, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("section", { className: "flex flex-wrap justify-between items-center rounded-lg p-8", __source: { fileName: "", lineNumber: 37, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full md:w-1/2 mb-8 md:mb-0", __source: { fileName: "", lineNumber: 38, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-5xl text-[#ff4500] font-extrabold mb-4", style: { textShadow: '2px 2px 4px rgba(0, 0, 0, 0.8)' }, __source: { fileName: "", lineNumber: 39, columnNumber: 13 }, __self: this }, "Find the right music for your mood"), /*#__PURE__*/ React.createElement("button", { className: "bg-white text-[#ff4500] px-6 py-2 inline-block rounded hover:bg-[#f7c1bf] hover:text-white", style: { ...buttonAnimationStyle, transition: 'background-color 0.3s ease-in-out' }, onClick: handleButtonClick, __source: { fileName: "", lineNumber: 40, columnNumber: 13 }, __self: this }, "Generate Music")), /*#__PURE__*/ React.createElement("div", { className: "w-full md:w-1/2", __source: { fileName: "", lineNumber: 51, columnNumber: 11 }, __self: this }))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 55, columnNumber: 7 }, __self: this }, ` a:hover { transform: scale(1.05); } @keyframes clickEffect { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(0.95); opacity: 0.8; } } `)); }