function MainComponent() { const [accountModalOpen, setAccountModalOpen] = React.useState(false); const toggleAccountModal = ()=>setAccountModalOpen(!accountModalOpen); const accountIconStyle = { position: 'absolute', top: '1rem', right: '1rem', cursor: 'pointer', fontSize: '24px', color: 'white' }; const accountModalBackgroundStyle = accountModalOpen ? { display: 'flex' } : { display: 'none' }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center w-full h-screen bg-[#000000] font-vogue overflow-hidden", __source: { fileName: "", lineNumber: 18, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "path-to-4k-background.jpg", alt: "Modern 4k background suitable for a search engine", className: "fixed w-full h-full object-cover", __source: { fileName: "", lineNumber: 19, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "fixed w-full h-full bg-black bg-opacity-60", __source: { fileName: "", lineNumber: 24, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "z-10", __source: { fileName: "", lineNumber: 26, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-white text-6xl font-bold mb-8", __source: { fileName: "", lineNumber: 27, columnNumber: 9 }, __self: this }, "UNIVERSAL"), /*#__PURE__*/ React.createElement("form", { className: "flex items-center justify-center", __source: { fileName: "", lineNumber: 28, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", className: "w-full max-w-[600px] h-14 px-6 text-2xl rounded-full text-white bg-[#121212] placeholder-white placeholder-opacity-50 focus:outline-none", placeholder: "Search the universe...", name: "search", __source: { fileName: "", lineNumber: 29, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "w-16 h-16 bg-[#121212] text-white rounded-full flex items-center justify-center ml-1", __source: { fileName: "", lineNumber: 35, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa-solid fa-magnifying-glass", __source: { fileName: "", lineNumber: 36, columnNumber: 13 }, __self: this })))), /*#__PURE__*/ React.createElement("i", { className: "fa-solid fa-user z-10", style: accountIconStyle, onClick: toggleAccountModal, __source: { fileName: "", lineNumber: 41, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 z-20 bg-black bg-opacity-80", style: accountModalBackgroundStyle, onClick: toggleAccountModal, __source: { fileName: "", lineNumber: 47, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-md m-auto bg-[#212121] rounded-md p-8", __source: { fileName: "", lineNumber: 48, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-white text-3xl font-bold mb-4", __source: { fileName: "", lineNumber: 49, columnNumber: 11 }, __self: this }, "Create an account"), /*#__PURE__*/ React.createElement("form", { __source: { fileName: "", lineNumber: 50, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "username", className: "w-full p-3 mb-3 rounded bg-[#121212] text-white placeholder-white placeholder-opacity-50", placeholder: "Username", __source: { fileName: "", lineNumber: 51, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "email", name: "email", className: "w-full p-3 mb-3 rounded bg-[#121212] text-white placeholder-white placeholder-opacity-50", placeholder: "Email", __source: { fileName: "", lineNumber: 57, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "password", name: "password", className: "w-full p-3 mb-3 rounded bg-[#121212] text-white placeholder-white placeholder-opacity-50", placeholder: "Password", __source: { fileName: "", lineNumber: 63, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "w-full p-3 bg-white text-black rounded font-medium", __source: { fileName: "", lineNumber: 69, columnNumber: 13 }, __self: this }, "Sign Up")))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 76, columnNumber: 7 }, __self: this }, ` @font-face { font-family: 'Vogue'; font-style: normal; font-weight: 400; src: local('Vogue'), local('Vogue-Regular'), url(path-to-vogue-font.woff2) format('woff2'); } body { margin: 0; font-family: Vogue, sans-serif; background-color: #000000; } *::placeholder { font-family: Vogue, sans-serif; } input:focus::placeholder { opacity: 1; } `)); }