function MainComponent() { const [fullName, setFullName] = React.useState(''); const [contactEmail, setContactEmail] = React.useState(''); const [watchModel, setWatchModel] = React.useState(''); const [description, setDescription] = React.useState(''); const [isAnimated, setIsAnimated] = React.useState(false); const handleSubmit = (e)=>{ e.preventDefault(); setIsAnimated(true); setTimeout(()=>setIsAnimated(false), 1000); }; const formClassName = isAnimated ? "animate-scaleDownUp" : "bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4 w-full md:w-[500px]"; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#FAFAFA] py-2", __source: { fileName: "", lineNumber: 19, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: formClassName, __source: { fileName: "", lineNumber: 20, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 21, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 22, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "fullName", className: "block text-[#333333] text-sm font-roboto mb-2", __source: { fileName: "", lineNumber: 23, columnNumber: 13 }, __self: this }, "Full Name"), /*#__PURE__*/ React.createElement("input", { name: "fullName", type: "text", value: fullName, onChange: (e)=>setFullName(e.target.value), className: "shadow appearance-none border rounded w-full py-2 px-3 text-[#333333] leading-tight focus:outline-none focus:shadow-outline", placeholder: "John Doe", __source: { fileName: "", lineNumber: 26, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 35, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "contactEmail", className: "block text-[#333333] text-sm font-roboto mb-2", __source: { fileName: "", lineNumber: 36, columnNumber: 13 }, __self: this }, "Contact Email"), /*#__PURE__*/ React.createElement("input", { name: "contactEmail", type: "email", value: contactEmail, onChange: (e)=>setContactEmail(e.target.value), className: "shadow appearance-none border rounded w-full py-2 px-3 text-[#333333] leading-tight focus:outline-none focus:shadow-outline", placeholder: "john.doe@example.com", __source: { fileName: "", lineNumber: 39, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 48, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "watchModel", className: "block text-[#333333] text-sm font-roboto mb-2", __source: { fileName: "", lineNumber: 49, columnNumber: 13 }, __self: this }, "Watch Model"), /*#__PURE__*/ React.createElement("input", { name: "watchModel", type: "text", value: watchModel, onChange: (e)=>setWatchModel(e.target.value), className: "shadow appearance-none border rounded w-full py-2 px-3 text-[#333333] leading-tight focus:outline-none focus:shadow-outline", placeholder: "Rolex Submariner", __source: { fileName: "", lineNumber: 52, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 61, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "description", className: "block text-[#333333] text-sm font-roboto mb-2", __source: { fileName: "", lineNumber: 62, columnNumber: 13 }, __self: this }, "Description of Issue"), /*#__PURE__*/ React.createElement("textarea", { name: "description", value: description, onChange: (e)=>setDescription(e.target.value), className: "shadow appearance-none border rounded w-full py-2 px-3 text-[#333333] mb-3 leading-tight focus:outline-none focus:shadow-outline", placeholder: "Describe the issue with your watch", rows: "4", __source: { fileName: "", lineNumber: 65, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between", __source: { fileName: "", lineNumber: 74, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-[#005A9C] hover:bg-[#00395D] text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline", __source: { fileName: "", lineNumber: 75, columnNumber: 13 }, __self: this }, "Submit Request"), /*#__PURE__*/ React.createElement("a", { href: "#", className: "font-roboto text-sm text-[#005A9C] hover:text-[#00395D]", __source: { fileName: "", lineNumber: 81, columnNumber: 13 }, __self: this }, "Need Help?")))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 90, columnNumber: 7 }, __self: this }, ` body { font-family: 'Roboto', sans-serif; } .animate-scaleDownUp { animation: scaleDownUp 1s ease-in-out; } @keyframes scaleDownUp { 0%, 100% { transform: scale(1); } 50% { transform: scale(0.9); } } `)); }