function MainComponent() { const [email, setEmail] = React.useState(''); const [submitted, setSubmitted] = React.useState(false); const [isValidEmail, setIsValidEmail] = React.useState(true); const validateEmail = (email)=>{ return String(email).toLowerCase().match(/^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\\.,;:\s@\"]+\.)+[^<>()[\]\\.,;:\s@\"]{2,})$/i); }; const handleSubmit = (e)=>{ e.preventDefault(); if (validateEmail(email)) { setIsValidEmail(true); setSubmitted(true); } else { setIsValidEmail(false); } }; const handleChange = (e)=>{ setEmail(e.target.value); if (!isValidEmail) setIsValidEmail(true); }; const emailInput = /*#__PURE__*/ React.createElement("input", { type: "email", name: "email", value: email, onChange: handleChange, placeholder: "Your Email Address", className: "w-1/2 h-[50px] border-[1px] border-[#CCD0D5] p-2", style: { maxWidth: '600px' }, __source: { fileName: "", lineNumber: 30, columnNumber: 5 }, __self: this }); const signUpButton = /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-[#1877F2] text-white ml-4 py-2 px-6 font-roboto hover:bg-[#1565C0] text-[18px]", style: { transition: 'background-color 0.3s' }, __source: { fileName: "", lineNumber: 42, columnNumber: 5 }, __self: this }, "Sign Up"); return /*#__PURE__*/ React.createElement("div", { className: "w-full h-screen bg-gradient-to-b from-[#F0F2F5] to-[#FFFFFF] flex flex-col items-center justify-center font-poppins", __source: { fileName: "", lineNumber: 52, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-[36px]", __source: { fileName: "", lineNumber: 53, columnNumber: 7 }, __self: this }, "Don’t Miss Our New Product Launch"), /*#__PURE__*/ React.createElement("p", { className: "text-[24px] text-[#606770] mt-4", __source: { fileName: "", lineNumber: 54, columnNumber: 7 }, __self: this }, "Join our waitlist to get the first scoop"), !submitted ? /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", { className: "mt-8 flex items-center", __source: { fileName: "", lineNumber: 57, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "flex items-center", __source: { fileName: "", lineNumber: 58, columnNumber: 13 }, __self: this }, emailInput, signUpButton)), !isValidEmail && /*#__PURE__*/ React.createElement("p", { className: "text-red-500 mt-2", __source: { fileName: "", lineNumber: 64, columnNumber: 13 }, __self: this }, "Please enter a valid email address")) : /*#__PURE__*/ React.createElement("p", { className: "text-green-500 mt-8", __source: { fileName: "", lineNumber: 68, columnNumber: 9 }, __self: this }, "Thank you for signing up! We'll keep you updated with the latest information on our product launch.")); }