function MainComponent() { const [tab, setTab] = React.useState("login"); const [loginData, setLoginData] = React.useState({ email: "", password: "" }); const [signUpData, setSignUpData] = React.useState({ name: "", email: "", password: "" }); const handleLoginChange = (e)=>{ setLoginData({ ...loginData, [e.target.name]: e.target.value }); }; const handleSignUpChange = (e)=>{ setSignUpData({ ...signUpData, [e.target.name]: e.target.value }); }; const handleLoginSubmit = async (e)=>{ e.preventDefault(); // Handle login logic }; const handleSignUpSubmit = async (e)=>{ e.preventDefault(); const response = await fetch("/xano", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(signUpData) }); // Handle the response }; return /*#__PURE__*/ React.createElement("div", { className: "font-roboto bg-[#f3f3f3] text-[#000] min-h-screen", __source: { fileName: "", lineNumber: 34, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "bg-transparent py-4", __source: { fileName: "", lineNumber: 35, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("nav", { className: "container mx-auto flex justify-between items-center", __source: { fileName: "", lineNumber: 36, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-[#000] text-2xl font-bold", __source: { fileName: "", lineNumber: 37, columnNumber: 11 }, __self: this }, "ScrapeAI.dev"), /*#__PURE__*/ React.createElement("div", { className: "flex space-x-8", __source: { fileName: "", lineNumber: 38, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#features", className: "text-[#000]", __source: { fileName: "", lineNumber: 39, columnNumber: 13 }, __self: this }, "Features"), /*#__PURE__*/ React.createElement("a", { href: "#pricing", className: "text-[#000]", __source: { fileName: "", lineNumber: 40, columnNumber: 13 }, __self: this }, "Pricing"), /*#__PURE__*/ React.createElement("a", { href: "#contact", className: "text-[#000]", __source: { fileName: "", lineNumber: 41, columnNumber: 13 }, __self: this }, "Contact")), /*#__PURE__*/ React.createElement("button", { className: "bg-[#000] text-[#fff] py-2 px-4 rounded", __source: { fileName: "", lineNumber: 43, columnNumber: 11 }, __self: this }, "Console"))), /*#__PURE__*/ React.createElement("main", { className: "container mx-auto py-16 text-center", __source: { fileName: "", lineNumber: 47, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-5xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-purple-400 via-pink-500 to-red-500", __source: { fileName: "", lineNumber: 48, columnNumber: 9 }, __self: this }, "ScrapeAI.dev"), /*#__PURE__*/ React.createElement("div", { className: "my-16", __source: { fileName: "", lineNumber: 52, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-center space-x-4 mb-8", __source: { fileName: "", lineNumber: 53, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: `py-2 px-4 ${tab === "login" ? "bg-[#000] text-[#fff]" : "bg-[#f3f3f3] text-[#000]"}`, onClick: ()=>setTab("login"), __source: { fileName: "", lineNumber: 54, columnNumber: 13 }, __self: this }, "Login"), /*#__PURE__*/ React.createElement("button", { className: `py-2 px-4 ${tab === "signup" ? "bg-[#000] text-[#fff]" : "bg-[#f3f3f3] text-[#000]"}`, onClick: ()=>setTab("signup"), __source: { fileName: "", lineNumber: 60, columnNumber: 13 }, __self: this }, "Sign Up")), tab === "login" ? /*#__PURE__*/ React.createElement("form", { onSubmit: handleLoginSubmit, className: "space-y-4", __source: { fileName: "", lineNumber: 69, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { className: "border border-gray-300 py-2 px-4 w-1/2 rounded", type: "email", name: "email", placeholder: "Email", value: loginData.email, onChange: handleLoginChange, __source: { fileName: "", lineNumber: 70, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("input", { className: "border border-gray-300 py-2 px-4 w-1/2 rounded", type: "password", name: "password", placeholder: "Password", value: loginData.password, onChange: handleLoginChange, __source: { fileName: "", lineNumber: 78, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "bg-[#000] text-[#fff] py-2 px-6 rounded", type: "submit", __source: { fileName: "", lineNumber: 86, columnNumber: 15 }, __self: this }, "Login")) : /*#__PURE__*/ React.createElement("form", { onSubmit: handleSignUpSubmit, className: "space-y-4", __source: { fileName: "", lineNumber: 89, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { className: "border border-gray-300 py-2 px-4 w-1/2 rounded", type: "text", name: "name", placeholder: "Name", value: signUpData.name, onChange: handleSignUpChange, __source: { fileName: "", lineNumber: 90, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("input", { className: "border border-gray-300 py-2 px-4 w-1/2 rounded", type: "email", name: "email", placeholder: "Email", value: signUpData.email, onChange: handleSignUpChange, __source: { fileName: "", lineNumber: 98, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("input", { className: "border border-gray-300 py-2 px-4 w-1/2 rounded", type: "password", name: "password", placeholder: "Password", value: signUpData.password, onChange: handleSignUpChange, __source: { fileName: "", lineNumber: 106, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "bg-[#000] text-[#fff] py-2 px-6 rounded", type: "submit", __source: { fileName: "", lineNumber: 114, columnNumber: 15 }, __self: this }, "Sign Up"))), /*#__PURE__*/ React.createElement("section", { id: "features", className: "my-16 py-16 bg-transparent", __source: { fileName: "", lineNumber: 119, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-3xl font-bold mb-8", __source: { fileName: "", lineNumber: 120, columnNumber: 11 }, __self: this }, "Features"), /*#__PURE__*/ React.createElement("div", { className: "mx-auto max-w-4xl", __source: { fileName: "", lineNumber: 121, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("section", { className: "my-16", __source: { fileName: "", lineNumber: 125, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { className: "border border-gray-300 py-2 px-4 w-1/2 rounded mb-4", type: "url", name: "website", placeholder: "Enter your website", value: loginData.email, onChange: (e)=>setLoginData({ ...loginData, email: e.target.value }), __source: { fileName: "", lineNumber: 126, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "bg-[#000] text-[#fff] py-2 px-6 rounded", __source: { fileName: "", lineNumber: 134, columnNumber: 11 }, __self: this }, "Search"), /*#__PURE__*/ React.createElement("div", { className: "mt-8 flex flex-wrap justify-center", __source: { fileName: "", lineNumber: 135, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("section", { id: "pricing", className: "my-16 py-16 bg-transparent", __source: { fileName: "", lineNumber: 139, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-3xl font-bold mb-8", __source: { fileName: "", lineNumber: 140, columnNumber: 11 }, __self: this }, "Pricing"), /*#__PURE__*/ React.createElement("div", { className: "mx-auto max-w-4xl grid grid-cols-1 md:grid-cols-3 gap-8", __source: { fileName: "", lineNumber: 141, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-8 bg-white rounded shadow-md", __source: { fileName: "", lineNumber: 142, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-2xl font-bold mb-4", __source: { fileName: "", lineNumber: 143, columnNumber: 15 }, __self: this }, "Basic"), /*#__PURE__*/ React.createElement("p", { className: "text-xl", __source: { fileName: "", lineNumber: 144, columnNumber: 15 }, __self: this }, "$10/month"), /*#__PURE__*/ React.createElement("ul", { className: "text-left mt-4", __source: { fileName: "", lineNumber: 145, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 146, columnNumber: 17 }, __self: this }, "Feature 1"), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 147, columnNumber: 17 }, __self: this }, "Feature 2"), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 148, columnNumber: 17 }, __self: this }, "Feature 3"))), /*#__PURE__*/ React.createElement("div", { className: "p-8 bg-white rounded shadow-md", __source: { fileName: "", lineNumber: 151, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-2xl font-bold mb-4", __source: { fileName: "", lineNumber: 152, columnNumber: 15 }, __self: this }, "Pro"), /*#__PURE__*/ React.createElement("p", { className: "text-xl", __source: { fileName: "", lineNumber: 153, columnNumber: 15 }, __self: this }, "$30/month"), /*#__PURE__*/ React.createElement("ul", { className: "text-left mt-4", __source: { fileName: "", lineNumber: 154, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 155, columnNumber: 17 }, __self: this }, "Feature 1"), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 156, columnNumber: 17 }, __self: this }, "Feature 2"), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 157, columnNumber: 17 }, __self: this }, "Feature 3"))), /*#__PURE__*/ React.createElement("div", { className: "p-8 bg-white rounded shadow-md", __source: { fileName: "", lineNumber: 160, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-2xl font-bold mb-4", __source: { fileName: "", lineNumber: 161, columnNumber: 15 }, __self: this }, "Enterprise"), /*#__PURE__*/ React.createElement("p", { className: "text-xl", __source: { fileName: "", lineNumber: 162, columnNumber: 15 }, __self: this }, "$50/month"), /*#__PURE__*/ React.createElement("ul", { className: "text-left mt-4", __source: { fileName: "", lineNumber: 163, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 164, columnNumber: 17 }, __self: this }, "Feature 1"), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 165, columnNumber: 17 }, __self: this }, "Feature 2"), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 166, columnNumber: 17 }, __self: this }, "Feature 3")))))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 173, columnNumber: 7 }, __self: this }, ` @keyframes appear { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .info-box { animation: appear 0.3s ease-in-out forwards; } .info-box:nth-child(1) { animation-delay: 0.1s; } .info-box:nth-child(2) { animation-delay: 0.2s; } .info-box:nth-child(3) { animation-delay: 0.3s; } .info-box:nth-child(4) { animation-delay: 0.4s; } .info-box:nth-child(5) { animation-delay: 0.5s; } `)); }