function MainComponent() { const [error, setError] = useState(null); const [loading, setLoading] = useState(false); const [email, setEmail] = useState(""); const [password, setPassword] = useState(""); const [role, setRole] = useState("creator"); const [name, setName] = useState(""); const { signUpWithCredentials } = useAuth(); useEffect(()=>{ const params = new URLSearchParams(window.location.search); const type = params.get("type") || "creator"; setRole(type); }, []); const onSubmit = async (e)=>{ e.preventDefault(); setLoading(true); setError(null); if (!email || !password || !name) { setError("Please fill in all fields"); setLoading(false); return; } try { const result = await signUpWithCredentials({ email, password, metadata: { name, role }, callbackUrl: role === "brand" ? "/brand-dashboard" : "/creator-dashboard", redirect: false }); if (result.error) { throw new Error(result.error); } window.location.href = role === "brand" ? "/brand-dashboard" : "/creator-dashboard"; } catch (err) { setError(err.message); setLoading(false); } }; const accentColor = role === "brand" ? "[#7A00FF]" : "[#2DFFB3]"; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gradient-to-b from-[#121212] to-[#1A1A2E] flex items-center justify-center p-4", __source: { fileName: "", lineNumber: 55, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("form", { noValidate: true, onSubmit: onSubmit, className: `w-full max-w-md rounded-xl bg-[#ffffff05] backdrop-blur-lg border border-${accentColor}/10 p-8`, __source: { fileName: "", lineNumber: 56, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "mb-8 text-center text-3xl font-bold text-white font-space-grotesk", __source: { fileName: "", lineNumber: 61, columnNumber: 9 }, __self: this }, "Create ", role === "brand" ? "Brand" : "Creator", " Account"), /*#__PURE__*/ React.createElement("div", { className: "space-y-6", __source: { fileName: "", lineNumber: 65, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "space-y-2", __source: { fileName: "", lineNumber: 66, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-300", __source: { fileName: "", lineNumber: 67, columnNumber: 13 }, __self: this }, role === "brand" ? "Company Name" : "Full Name"), /*#__PURE__*/ React.createElement("div", { className: `overflow-hidden rounded-lg border border-${accentColor}/10 bg-[#121212] px-4 py-3 focus-within:border-${accentColor}`, __source: { fileName: "", lineNumber: 70, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { required: true, name: "name", type: "text", value: name, onChange: (e)=>setName(e.target.value), placeholder: `Enter your ${role === "brand" ? "company" : "full"} name`, className: "w-full bg-transparent text-lg outline-none text-white", __source: { fileName: "", lineNumber: 73, columnNumber: 15 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "space-y-2", __source: { fileName: "", lineNumber: 85, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-300", __source: { fileName: "", lineNumber: 86, columnNumber: 13 }, __self: this }, role === "brand" ? "Business Email" : "Email"), /*#__PURE__*/ React.createElement("div", { className: `overflow-hidden rounded-lg border border-${accentColor}/10 bg-[#121212] px-4 py-3 focus-within:border-${accentColor}`, __source: { fileName: "", lineNumber: 89, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { required: true, name: "email", type: "email", value: email, onChange: (e)=>setEmail(e.target.value), placeholder: `Enter your ${role === "brand" ? "business " : ""}email`, className: "w-full bg-transparent text-lg outline-none text-white", __source: { fileName: "", lineNumber: 92, columnNumber: 15 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "space-y-2", __source: { fileName: "", lineNumber: 104, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-300", __source: { fileName: "", lineNumber: 105, columnNumber: 13 }, __self: this }, "Password"), /*#__PURE__*/ React.createElement("div", { className: `overflow-hidden rounded-lg border border-${accentColor}/10 bg-[#121212] px-4 py-3 focus-within:border-${accentColor}`, __source: { fileName: "", lineNumber: 108, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { required: true, name: "password", type: "password", value: password, onChange: (e)=>setPassword(e.target.value), className: "w-full rounded-lg bg-transparent text-lg outline-none text-white", placeholder: "Enter your password", __source: { fileName: "", lineNumber: 111, columnNumber: 15 }, __self: this }))), error && /*#__PURE__*/ React.createElement("div", { className: "rounded-lg bg-red-500/10 p-3 text-sm text-red-500", __source: { fileName: "", lineNumber: 124, columnNumber: 13 }, __self: this }, error), /*#__PURE__*/ React.createElement("button", { type: "submit", disabled: loading, className: `w-full rounded-lg px-4 py-3 text-base font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 ${role === "brand" ? "bg-[#7A00FF] hover:bg-[#7A00FF]/80 focus:ring-[#7A00FF] text-white" : "bg-[#2DFFB3] hover:bg-[#2DFFB3]/80 focus:ring-[#2DFFB3] text-black"}`, __source: { fileName: "", lineNumber: 129, columnNumber: 11 }, __self: this }, loading ? "Loading..." : `Create ${role === "brand" ? "Brand" : "Creator"} Account`), /*#__PURE__*/ React.createElement("p", { className: "text-center text-sm text-gray-400", __source: { fileName: "", lineNumber: 143, columnNumber: 11 }, __self: this }, "Already have an account?", " ", /*#__PURE__*/ React.createElement("a", { href: `/account/signin?type=${role}`, className: `text-${accentColor} hover:text-${accentColor}/80`, __source: { fileName: "", lineNumber: 145, columnNumber: 13 }, __self: this }, "Sign in")), /*#__PURE__*/ React.createElement("div", { className: "text-center text-sm text-gray-400", __source: { fileName: "", lineNumber: 153, columnNumber: 11 }, __self: this }, role === "brand" ? "Are you a creator?" : "Are you a brand?", " ", /*#__PURE__*/ React.createElement("a", { href: role === "brand" ? "/account/creator/signup" : "/account/brand/signup", className: `text-${accentColor} hover:text-${accentColor}/80`, __source: { fileName: "", lineNumber: 155, columnNumber: 13 }, __self: this }, "Create a ", role === "brand" ? "creator" : "brand", " account"))))); }

Create Creator Account