function FullWidthNameInputField({ name, value, onChange }) { return /*#__PURE__*/ React.createElement("input", { name: name, className: "w-full p-2 border border-gray-300 rounded", type: "text", value: value, onChange: onChange, __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }); } function FullWidthNameInputFieldStory() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 15, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(FullWidthNameInputField, { name: "name", value: "Sample Name", onChange: (e)=>console.log(e.target.value), __source: { fileName: "", lineNumber: 16, columnNumber: 7 }, __self: this })); } function MainComponent() { const [name, setName] = React.useState(""); return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen flex flex-col items-center justify-center bg-[#f0f4f8] text-[#333] font-roboto", __source: { fileName: "", lineNumber: 5, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "w-full bg-[#005b96] text-white p-4 text-center", __source: { fileName: "", lineNumber: 6, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold", __source: { fileName: "", lineNumber: 7, columnNumber: 9 }, __self: this }, "AI SaaS Application"), /*#__PURE__*/ React.createElement("p", { className: "mt-2 text-lg", __source: { fileName: "", lineNumber: 8, columnNumber: 9 }, __self: this }, "Unleash the Power of AI for Your Business")), /*#__PURE__*/ React.createElement("main", { className: "flex flex-col md:flex-row w-full flex-grow", __source: { fileName: "", lineNumber: 10, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("section", { className: "md:w-1/2 px-6 py-8 flex flex-col items-center", __source: { fileName: "", lineNumber: 11, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-3xl font-semibold mb-4", __source: { fileName: "", lineNumber: 12, columnNumber: 11 }, __self: this }, "Features"), /*#__PURE__*/ React.createElement("ul", { className: "text-left list-disc", __source: { fileName: "", lineNumber: 13, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("li", { className: "mb-2", __source: { fileName: "", lineNumber: 14, columnNumber: 13 }, __self: this }, "Intelligent Data Analysis"), /*#__PURE__*/ React.createElement("li", { className: "mb-2", __source: { fileName: "", lineNumber: 15, columnNumber: 13 }, __self: this }, "Predictive Analytics"), /*#__PURE__*/ React.createElement("li", { className: "mb-2", __source: { fileName: "", lineNumber: 16, columnNumber: 13 }, __self: this }, "Automated Reporting"), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 17, columnNumber: 13 }, __self: this }, "Scalable Solutions"))), /*#__PURE__*/ React.createElement("section", { className: "md:w-1/2 px-6 py-8 flex flex-col items-center", __source: { fileName: "", lineNumber: 20, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-3xl font-semibold mb-4", __source: { fileName: "", lineNumber: 21, columnNumber: 11 }, __self: this }, "Get Started"), /*#__PURE__*/ React.createElement("form", { className: "w-full max-w-md bg-white p-6 rounded-lg shadow-md", __source: { fileName: "", lineNumber: 22, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 23, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 text-sm font-bold mb-2", htmlFor: "name", __source: { fileName: "", lineNumber: 24, columnNumber: 15 }, __self: this }, "Name"), /*#__PURE__*/ React.createElement(FullWidthNameInputField, { name: "name", value: name, onChange: (e)=>setName(e.target.value), __source: { fileName: "", lineNumber: 27, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 33, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 text-sm font-bold mb-2", htmlFor: "email", __source: { fileName: "", lineNumber: 34, columnNumber: 15 }, __self: this }, "Email"), /*#__PURE__*/ React.createElement("input", { name: "email", className: "w-full p-2 border border-gray-300 rounded", type: "email", __source: { fileName: "", lineNumber: 37, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 39, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 text-sm font-bold mb-2", htmlFor: "password", __source: { fileName: "", lineNumber: 40, columnNumber: 15 }, __self: this }, "Password"), /*#__PURE__*/ React.createElement("input", { name: "password", className: "w-full p-2 border border-gray-300 rounded", type: "password", __source: { fileName: "", lineNumber: 43, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("button", { className: "w-full bg-[#005b96] text-white py-2 rounded hover:bg-[#00487c] transition duration-300", __source: { fileName: "", lineNumber: 45, columnNumber: 13 }, __self: this }, "Sign Up")))), /*#__PURE__*/ React.createElement("footer", { className: "w-full bg-[#005b96] text-white p-4 text-center", __source: { fileName: "", lineNumber: 51, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 52, columnNumber: 9 }, __self: this }, "© 2024 AI SaaS Application. All rights reserved."))); }