🚩 (flags) create signup provision page

features/auth/ui/cards/Provision.tsx

@@ -0,0 +1,22 @@
+"use client";
+
+import React from "react";
+import ProvisionInput from "../components/ProvisionInput";
+
+type Props = {
+  fullName: string;
+};
+
+const Provision = ({ fullName }: Props) => {
+  return (
+    <div className="pt-12 max-w-[480px] mx-auto">
+      <div className="text-3xl text-center">Hey, {fullName.split(" ")[0]}</div>
+      <p className="text-sm text-center font-light text-neutral-300 mt-2">
+        Just a few more steps to join the fun!
+      </p>
+      <ProvisionInput />
+    </div>
+  );
+};
+
+export default Provision;

features/auth/ui/components/FullNameInput.tsx

@@ -2,7 +2,7 @@
 
 import React, { useState } from "react";
 import { Button, Input } from "@heroui/react";
-import DebugPage from "@/app/debug/DebugPage";
+import Provision from "../cards/Provision";
 
 type Props = {
   changeCurrentPage: React.Dispatch<React.SetStateAction<React.JSX.Element>>;
@@ -25,7 +25,7 @@ const FullNameInput = ({ changeCurrentPage }: Props) => {
         }}
       />
       <Button
-        onPress={() => changeCurrentPage(<DebugPage />)}
+        onPress={() => changeCurrentPage(<Provision fullName={fullName} />)}
         className="mt-2 w-full"
         color="primary"
       >

features/auth/ui/components/ProvisionInput.tsx

@@ -0,0 +1,55 @@
+"use client";
+
+import { Button, Input } from "@heroui/react";
+import React, { useState } from "react";
+
+const ProvisionInput = () => {
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [confirmPassword, setConfirmPassword] = useState("");
+
+  return (
+    <div className="mt-6 px-3">
+      <div className="flex flex-col gap-1.5">
+        <Input
+          className="w-full "
+          label="Email"
+          type="email"
+          variant="bordered"
+          onChange={(e) => setEmail(e.target.value)}
+          classNames={{
+            input: "text-md font-light pt-4",
+            inputWrapper: "flex gap-10",
+          }}
+        />
+        <Input
+          className="w-full "
+          label="Password"
+          type="password"
+          variant="bordered"
+          onChange={(e) => setPassword(e.target.value)}
+          classNames={{
+            input: "text-md font-light pt-4",
+            inputWrapper: "flex gap-10",
+          }}
+        />
+        <Input
+          className="w-full "
+          label="Confirm Password"
+          type="password"
+          variant="bordered"
+          onChange={(e) => setConfirmPassword(e.target.value)}
+          classNames={{
+            input: "text-md font-light pt-4",
+            inputWrapper: "flex gap-10",
+          }}
+        />
+      </div>
+      <Button className="mt-3 w-full" color="primary">
+        Continue
+      </Button>
+    </div>
+  );
+};
+
+export default ProvisionInput;