feat: implement admin signup flow

src/app/admin/signup/components/BackButton.tsx

@@ -0,0 +1,15 @@
+import React from 'react'
+import { ChevronLeft } from 'lucide-react';
+
+export default function BackButton({ onBack }: { onBack: () => void }) {
+  return (
+    <button
+      type="button"
+      className="flex items-center gap-1 mb-6 border-[#E7E7E7] border rounded-md w-fit px-2 py-1"
+      onClick={onBack}
+    >
+      <ChevronLeft className="w-8 h-8 text-gray-300" />
+      <span className="text-gray-500 text-base font-medium">Back</span>
+    </button>
+  );
+}

src/app/admin/signup/components/ConnectingStep.tsx

@@ -0,0 +1,45 @@
+import { SignInStep } from '@/lib/types';
+import React, { useEffect } from 'react';
+import WalletIcon from '@/components/svg/WalletIcon';
+
+interface Props {
+    onBack: () => void;
+    onStepChange: (step: SignInStep) => void;
+}
+
+
+export default function ConnectingStep({ onBack, onStepChange }: Props) {
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      onStepChange("signature");
+    }, 3000);
+
+    return () => clearTimeout(timer);
+  }, [onStepChange]);
+
+  return (
+    <div className="min-h-screen bg-gray-100 flex items-center justify-center font-inter">
+      <div className="bg-white rounded-2xl shadow-lg w-full max-w-md px-6 py-8 sm:px-10 sm:py-10 flex flex-col items-center">
+        <div className="flex items-center gap-3 mb-8">
+          <div className="w-12 h-12 rounded-full bg-blue-600 flex items-center justify-center">
+            <WalletIcon />
+          </div>
+          <span className="text-xl font-bold text-gray-900">Braavos</span>
+        </div>
+        <div className="flex flex-col items-center mb-8">
+          <div className="w-24 h-24 rounded-full bg-blue-50 flex items-center justify-center mb-6">
+            <div className="w-6 h-6 rounded-full bg-blue-600"></div>
+          </div>
+          <div className="text-base text-gray-500 text-center font-medium">Connecting to Wallet...</div>
+        </div>
+        <button
+          onClick={() => onStepChange("signature")}
+          className="w-full h-full py-3  bg-gradient-to-b  font-semibold text-base shadow-sm hover:from-blue-200 hover:to-blue-300 transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 rounded-md bg-[linear-gradient(to_bottom,_#EDF7FF_100%,_#096CFF_30%)]
+ hover:bg-gray-200"
+        >
+          Cancel
+        </button>
+      </div>
+    </div>
+  );
+} 

src/app/admin/signup/components/EmailSignInStep.tsx

@@ -0,0 +1,130 @@
+import React, { useState,  } from "react";
+import { Eye, EyeOff, Lock } from "lucide-react";
+import BackButton from "./BackButton";
+import { SignInStep } from "@/lib/types";
+
+
+interface EmailSignInStepProps {
+  onBack: () => void;
+  onStepChange: (step: SignInStep) => void;
+}
+
+const emailRegex = /^[\w-.]+@([\w-]+\.)+[\w-]{2,}$/i;
+
+export default function EmailSignInStep({
+  onBack,
+  onStepChange,
+}: EmailSignInStepProps) {
+  const [showPassword, setShowPassword] = useState(false);
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [emailError, setEmailError] = useState("");
+
+  const handleEmailChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const value = e.target.value;
+    setEmail(value);
+    if (value.length === 0 || emailRegex.test(value)) {
+      setEmailError("");
+    } else {
+      setEmailError("Please enter a valid email address");
+    }
+  };
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!emailRegex.test(email)) {
+      setEmailError("Please enter a valid email address");
+      return;
+    } else {
+      setEmailError("");
+      onStepChange("success");
+    }
+  };
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-gray-100 font-inter">
+      <div className="bg-white rounded-xl shadow-md p-6 w-full max-w-xl">
+        <BackButton onBack={onBack} />
+
+        <h2 className="text-2xl font-inter font-semibold text-[#5D5D5D] mb-1">
+          Welcome Back
+        </h2>
+        <p className="text-[#5D5D5D] text-base font-inter mb-8">
+          Enter your registered email address and password
+        </p>
+
+        <form className="flex flex-col gap-6" onSubmit={handleSubmit}>
+          <div>
+            <label
+              className="block text-[#5D5D5D] text-base font-inter mb-2"
+              htmlFor="email"
+            >
+              Email Address
+            </label>
+            <input
+              id="email"
+              type="email"
+              className="rounded-md border border-gray-300  py-2 w-full px-5 focus:outline-none focus:ring-2 focus:ring-blue-100  placeholder:text-[#B0B0B0] font-normal text-base h-[50px]"
+              placeholder="Enter Email address"
+              value={email}
+              onChange={handleEmailChange}
+              autoComplete="email"
+            />
+            {emailError && (
+              <p className="text-base  text-red-500 mt-1">{emailError}</p>
+            )}
+          </div>
+
+          <div>
+            <div className="flex items-center justify-between mb-1">
+              <label
+                className="block text-[#5D5D5D] text-base font-inter"
+                htmlFor="password"
+              >
+                Password
+              </label>
+              <a
+                href="#"
+                className="text-[#096CFF] text-base font-inter hover:underline"
+              >
+                Forgot Password?
+              </a>
+            </div>
+            <div className="relative">
+              <span className="absolute left-3 top-1/2 -translate-y-1/2">
+                <Lock className="w-4 h-4 text-gray-400" />
+              </span>
+              <input
+                id="password"
+                type={showPassword ? "text" : "password"}
+                className="rounded-md border border-gray-300 px-3 py-2 w-full pl-10 pr-10 focus:outline-none focus:ring-2 focus:ring-blue-100  placeholder:text-[#B0B0B0] font-normal text-base h-[50px]"
+                placeholder="Enter Password"
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                autoComplete="current-password"
+              />
+              <button
+                type="button"
+                onClick={() => setShowPassword(!showPassword)}
+                className="absolute right-3 top-1/2 -translate-y-1/2"
+              >
+                {showPassword ? (
+                  <EyeOff className="w-4 h-4 text-gray-400" />
+                ) : (
+                  <Eye className="w-4 h-4 text-gray-400" />
+                )}
+              </button>
+            </div>
+          </div>
+
+          <button
+            type="submit"
+            className="w-full bg-[#096CFF] text-white py-3 px-4 rounded-md font-inter font-medium text-base hover:bg-blue-700 transition-colors h-[50px]"
+          >
+            Sign In
+          </button>
+        </form>
+      </div>
+    </div>
+  );
+}

src/app/admin/signup/components/QRCodeStep.tsx

@@ -0,0 +1,50 @@
+import React from "react";
+import BackButton from "./BackButton";
+import { SignInStep } from "@/lib/types";
+
+interface QRCodeStepProps {
+  onBack: () => void;
+  onStepChange: (step: SignInStep) => void;
+}
+
+export default function QRCodeStep({ onBack, onStepChange }: QRCodeStepProps) {
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-gray-100">
+      <div className="bg-white rounded-2xl shadow-lg p-10 w-full max-w-lg flex flex-col ">
+        <BackButton onBack={onBack} />
+
+        <div className="flex items-center max-w-xs gap-x-1 mx-auto">
+          <div className="w-10 h-10 flex items-center justify-center rounded-full bg-blue-600 ">
+            <span className="text-white text-3xl font-bold">B</span>
+          </div>
+          <div className="text-2xl font-bold text-gray-900">Braavos</div>
+        </div>
+
+        <div className="flex mt-8 gap-x-3 items-center rounded-lg max-w-xs mx-auto ">
+          <div
+            onClick={() => onStepChange("connecting")}
+            className="bg-gray-300 cursor-pointer rounded-lg w-fit text-[#454545] px-6 py-3 text-base  text-center"
+          >
+            Website
+          </div>
+          <div className="bg-gray-100 rounded-lg w-fit text-[#454545] px-6 py-3 text-base  text-center">
+            Mobile App
+          </div>
+        </div>
+        <div className="flex items-center justify-center">
+          <div className=" w-[180px] h-[180px]  mt-8  rounded-lg ">
+            <img
+              src="/qrcode.png"
+              alt="QR Code"
+              className="w-full h-full object-contain"
+            />
+          </div>
+        </div>
+
+        <div className="text-base text-gray-600 text-center mt-6">
+          Scan to connect and log-In with Braavos app
+        </div>
+      </div>
+    </div>
+  );
+}

src/app/admin/signup/components/SignatureStep.tsx

@@ -0,0 +1,44 @@
+import { SignInStep } from "@/lib/types";
+import React, { useEffect } from "react";
+
+interface Props {
+  onBack: () => void;
+  onStepChange: (step: SignInStep) => void;
+}
+
+export default function SignatureStep({ onBack, onStepChange }: Props) {
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      onStepChange("success");
+    }, 3000);
+
+    return () => clearTimeout(timer);
+  }, [onStepChange]);
+
+  return (
+    <div className="min-h-screen bg-gray-100 flex items-center justify-center font-inter">
+      <div className="bg-white rounded-2xl shadow-lg w-full max-w-md px-6 py-8 sm:px-10 sm:py-10 flex flex-col items-center">
+        <div className="flex flex-col items-center mb-8">
+          <div className="w-24 h-24 flex items-center justify-center mb-6">
+
+            <div className="w-24 h-24 rounded-full  border-8 !border-blue-600 flex items-center justify-center">
+              <div className="w-6 h-6 rounded-full border-4 !border-blue-100"></div>
+            </div>
+          </div>
+          <div className="text-base text-gray-500 text-center font-medium max-w-xs">
+            Sign the message in your wallet
+            <br />
+            to confirm the authentication process
+          </div>
+        </div>
+        <button
+          onClick={() => onStepChange("success")}
+          className="w-full h-full py-3  bg-gradient-to-b  font-semibold text-base shadow-sm hover:from-blue-200 hover:to-blue-300 transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 rounded-md bg-[linear-gradient(to_bottom,_#EDF7FF_100%,_#096CFF_30%)]
+ hover:bg-gray-200"
+        >
+          Cancel
+        </button>
+      </div>
+    </div>
+  );
+}

src/app/admin/signup/components/SuccessStep.tsx

@@ -0,0 +1,35 @@
+import React from "react";
+import CheckIcon from "@/components/svg/CheckIcon";
+
+interface SuccessStepProps {
+  onProceed: () => void;
+}
+
+export default function SuccessStep({
+  onProceed,
+}: SuccessStepProps) {
+  return (
+    <div className="min-h-screen bg-gray-100 flex items-center justify-center font-inter">
+      <div className="bg-white rounded-2xl shadow-lg w-full max-w-md px-6 py-8 sm:px-10 sm:py-10 flex flex-col items-center ">
+        <div className="flex flex-col items-center mb-8">
+          <div className="w-30 h-30 flex items-center justify-center mb-8">
+            <div className="w-30 h-30 rounded-full bg-blue-100 flex items-center justify-center">
+              <div className="w-20 h-20 rounded-full bg-blue-600 flex items-center justify-center">
+                <CheckIcon />
+              </div>
+            </div>
+          </div>
+          <div className="text-xl font-medium text-gray-800 text-center">
+            Bravoos Wallet Connected
+          </div>
+        </div>
+        <button
+          onClick={onProceed}
+          className="px-6 py-4 w-full rounded-md bg-blue-600 text-white hover:bg-blue-700 transition"
+        >
+          Proceed
+        </button>
+      </div>
+    </div>
+  );
+}