function MainComponent() { const [buttonClicked, setButtonClicked] = React.useState(false); const handleClick = (buttonName)=>{ console.log(`Button ${buttonName} clicked`); setButtonClicked(true); setTimeout(()=>setButtonClicked(false), 1000); }; const startButtonAnimation = buttonClicked ? "animate-ping" : ""; const hoverAnimation = "hover:animate-bounce"; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#f7f7f7]", __source: { fileName: "", lineNumber: 11, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-semibold font-roboto mb-8 text-[#121212]", __source: { fileName: "", lineNumber: 12, columnNumber: 7 }, __self: this }, "Welcome to the App"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-4 w-full px-4 sm:w-[500px]", __source: { fileName: "", lineNumber: 13, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleClick('2'), className: `py-3 px-6 bg-[#dc2626] text-white rounded-md text-lg font-medium font-roboto shadow-sm transform transition duration-300 hover:bg-[#ef4444] focus:outline-none focus:ring-2 focus:ring-[#f87171] focus:ring-opacity-50 ${hoverAnimation}`, __source: { fileName: "", lineNumber: 15, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-plus mr-2", __source: { fileName: "", lineNumber: 15, columnNumber: 297 }, __self: this }), "Create"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleClick('3'), className: `py-3 px-6 bg-[#059669] text-white rounded-md text-lg font-medium font-roboto shadow-sm transform transition duration-300 hover:bg-[#10b981] focus:outline-none focus:ring-2 focus:ring-[#34d399] focus:ring-opacity-50 ${hoverAnimation}`, __source: { fileName: "", lineNumber: 16, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-users mr-2", __source: { fileName: "", lineNumber: 16, columnNumber: 297 }, __self: this }), "Join"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleClick('4'), className: `py-3 px-6 bg-[#7c3aed] text-white rounded-md text-lg font-medium font-roboto shadow-sm transform transition duration-300 hover:bg-[#8b5cf6] focus:outline-none focus:ring-2 focus:ring-[#a78bfa] focus:ring-opacity-50 ${hoverAnimation}`, __source: { fileName: "", lineNumber: 17, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-cog mr-2", __source: { fileName: "", lineNumber: 17, columnNumber: 297 }, __self: this }), "Options")), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 19, columnNumber: 7 }, __self: this }, ` @keyframes bounce { 0%, 100% { transform: translateY(-25%); animation-timing-function: cubic-bezier(0.8,0,1,1); } 50% { transform: translateY(0); animation-timing-function: cubic-bezier(0,0,0.2,1); } } .animate-bounce { animation: bounce 0.5s infinite; } @keyframes ping { 0% { transform: scale(1); opacity: 1; } 75%, 100% { transform: scale(2); opacity: 0; } } .animate-ping { animation: ping 1s cubic-bezier(0, 0, 0.2, 1) 1; } `)); }