function MainComponent() { const [username, setUsername] = React.useState(''); const [email, setEmail] = React.useState(''); const [password, setPassword] = React.useState(''); const [registered, setRegistered] = React.useState(false); const [errorMsg, setErrorMsg] = React.useState(''); const handleRegistration = (e)=>{ e.preventDefault(); if (username && email && password) { setUsername(''); setEmail(''); setPassword(''); setRegistered(true); setErrorMsg(''); } else { setErrorMsg('All fields are required.'); } }; const registrationForm = /*#__PURE__*/ React.createElement("form", { onSubmit: handleRegistration, className: "space-y-4", __source: { fileName: "", lineNumber: 22, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "username", value: username, onChange: (e)=>setUsername(e.target.value), className: "w-full border-[#D1D5DB] border-2 rounded-md py-2 px-4 font-roboto", placeholder: "Username", __source: { fileName: "", lineNumber: 23, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "email", name: "email", value: email, onChange: (e)=>setEmail(e.target.value), className: "w-full border-[#D1D5DB] border-2 rounded-md py-2 px-4 font-roboto", placeholder: "Email", __source: { fileName: "", lineNumber: 31, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "password", name: "password", value: password, onChange: (e)=>setPassword(e.target.value), className: "w-full border-[#D1D5DB] border-2 rounded-md py-2 px-4 font-roboto", placeholder: "Password", __source: { fileName: "", lineNumber: 39, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full bg-[#10B981] text-white py-3 rounded-md shadow-sm font-roboto transition duration-300 ease-in-out", __source: { fileName: "", lineNumber: 47, columnNumber: 7 }, __self: this }, "Register Now"), errorMsg && /*#__PURE__*/ React.createElement("p", { className: "text-center text-red-500 text-sm font-roboto", __source: { fileName: "", lineNumber: 53, columnNumber: 20 }, __self: this }, errorMsg)); const successMessage = /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 58, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-lg text-[#10B981]", __source: { fileName: "", lineNumber: 59, columnNumber: 7 }, __self: this }, "Registration successful! Welcome to C Star.")); return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#F9FAFB]", __source: { fileName: "", lineNumber: 64, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "space-y-6 p-8 bg-[#FFFFFF] shadow-md rounded-lg w-full max-w-[600px]", __source: { fileName: "", lineNumber: 65, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold font-roboto text-center text-[#121212]", __source: { fileName: "", lineNumber: 66, columnNumber: 9 }, __self: this }, "C Star Registration"), registered ? successMessage : registrationForm), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 69, columnNumber: 7 }, __self: this }, ` @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } .animate-float { animation: float 4s ease-in-out infinite; } `)); }