function MainComponent() { const [entered, setEntered] = React.useState(false); React.useEffect(()=>{ setEntered(true); }, []); const heroStyles = entered ? 'hero-animation-enter-active' : 'hero-animation-enter'; return /*#__PURE__*/ React.createElement("div", { className: "bg-[#5865F2]", __source: { fileName: "", lineNumber: 8, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `container mx-auto px-4 md:px-6 py-10 lg:flex lg:items-center lg:justify-between lg:py-20 ${heroStyles}`, __source: { fileName: "", lineNumber: 9, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-white space-y-3 lg:w-1/2", __source: { fileName: "", lineNumber: 10, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold leading-tight font-roboto", __source: { fileName: "", lineNumber: 11, columnNumber: 11 }, __self: this }, "Join Our Exclusive Discord Universe"), /*#__PURE__*/ React.createElement("p", { className: "text-lg font-roboto", __source: { fileName: "", lineNumber: 12, columnNumber: 11 }, __self: this }, "Step into the ultimate gaming odyssey. Team up, compete and explore together in our vibrant Discord world!"), /*#__PURE__*/ React.createElement("a", { href: "#play", className: "font-roboto bg-[#7289DA] hover:bg-[#677BC4] text-white py-2 px-4 rounded-md inline-block", __source: { fileName: "", lineNumber: 15, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-xl", __source: { fileName: "", lineNumber: 16, columnNumber: 13 }, __self: this }, "🎮"), " Join the Adventure")), /*#__PURE__*/ React.createElement("div", { className: "lg:w-1/2", __source: { fileName: "", lineNumber: 19, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "./images/discord_universe_hero.png", alt: "Discord universe with gamers collaborating", className: "w-full h-auto", __source: { fileName: "", lineNumber: 20, columnNumber: 11 }, __self: this }))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 23, columnNumber: 7 }, __self: this }, ` @media (min-width: 1024px) { .hero-animation-enter { opacity: 0; transform: translateY(-10%); } .hero-animation-enter-active { opacity: 1; transform: translateY(0); transition: opacity 700ms, transform 700ms; } } `)); }