function MainComponent() { const [email, setEmail] = React.useState(''); const handleEmailChange = (event)=>{ setEmail(event.target.value); }; const handleSignUp = (event)=>{ event.preventDefault(); // Logic to handle sign up with email }; const contentStyle = "flex flex-col items-center justify-center min-h-screen p-4 bg-white text-gray-800"; const logoStyle = "mb-8 w-[300px] sm:w-[400px] lg:w-[500px]"; const headingStyle = "text-4xl sm:text-5xl md:text-6xl font-bold mb-6"; const inputGroupStyle = "flex flex-col space-y-4 mb-6"; const inputStyle = "w-full px-4 py-2 border border-gray-300 rounded-lg"; const buttonStyle = "w-full px-4 py-2 bg-[#5C7FEC] text-white rounded-lg font-semibold hover:bg-[#435ebe]"; const featureSectionStyle = "w-full py-12 flex flex-wrap justify-center items-center"; const featureStyle = "m-4 p-4 w-[300px] sm:w-[350px] lg:w-[400px] bg-gray-100 rounded-lg"; const featureIconStyle = "mb-4 text-[#5C7FEC] text-3xl"; const featureHeadingStyle = "font-semibold text-xl mb-2"; const featureDescriptionStyle = "text-sm"; return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", { className: contentStyle, __source: { fileName: "", lineNumber: 27, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "/logo.png", alt: "Jumpshare logo", className: logoStyle, __source: { fileName: "", lineNumber: 28, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("h1", { className: headingStyle, __source: { fileName: "", lineNumber: 29, columnNumber: 9 }, __self: this }, "Jumpshare"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSignUp, className: inputGroupStyle, __source: { fileName: "", lineNumber: 30, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "email", placeholder: "Email address", name: "email", value: email, onChange: handleEmailChange, className: inputStyle, __source: { fileName: "", lineNumber: 31, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: buttonStyle, __source: { fileName: "", lineNumber: 39, columnNumber: 11 }, __self: this }, "Sign Up Free")), /*#__PURE__*/ React.createElement("div", { className: featureSectionStyle, __source: { fileName: "", lineNumber: 43, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: featureStyle, __source: { fileName: "", lineNumber: 44, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas fa-file-import ${featureIconStyle}`, __source: { fileName: "", lineNumber: 45, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("h2", { className: featureHeadingStyle, __source: { fileName: "", lineNumber: 46, columnNumber: 13 }, __self: this }, "Share Files"), /*#__PURE__*/ React.createElement("p", { className: featureDescriptionStyle, __source: { fileName: "", lineNumber: 47, columnNumber: 13 }, __self: this }, "Share your work and ideas through instantly shareable links.")), /*#__PURE__*/ React.createElement("div", { className: featureStyle, __source: { fileName: "", lineNumber: 51, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas fa-users ${featureIconStyle}`, __source: { fileName: "", lineNumber: 52, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("h2", { className: featureHeadingStyle, __source: { fileName: "", lineNumber: 53, columnNumber: 13 }, __self: this }, "Collaborate"), /*#__PURE__*/ React.createElement("p", { className: featureDescriptionStyle, __source: { fileName: "", lineNumber: 54, columnNumber: 13 }, __self: this }, "Collaborate in real-time, gather feedback, and get sign-offs on your work.")), /*#__PURE__*/ React.createElement("div", { className: featureStyle, __source: { fileName: "", lineNumber: 58, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas fa-lock ${featureIconStyle}`, __source: { fileName: "", lineNumber: 59, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("h2", { className: featureHeadingStyle, __source: { fileName: "", lineNumber: 60, columnNumber: 13 }, __self: this }, "Control"), /*#__PURE__*/ React.createElement("p", { className: featureDescriptionStyle, __source: { fileName: "", lineNumber: 61, columnNumber: 13 }, __self: this }, "Keep control of your files and decide who sees what.")))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 67, columnNumber: 7 }, __self: this }, ` @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes slideInUp { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } div { animation: fadeIn 1s ease-out; } form, .feature { animation: slideInUp 0.5s ease-out; } `)); }