feat: implement AuthLayout component and streamline OTP verification forms with enhanced messaging

components/auth/verify-otp-form.tsx

@@ -61,6 +61,9 @@ export default function VerifyOTPForm({
 		>
 			<div className="grid pb-4 pt-4 gap-4 px-4">
 				<div className="flex flex-col gap-4">
+					<p className="text-center text-sm text-sarLinkOrange">
+						Login OTP Sent to {phone_number}
+					</p>
 					<Label htmlFor="otp-number" className="sr-only text-gray-500">
 						Enter the OTP
 					</Label>
@@ -70,7 +73,7 @@ export default function VerifyOTPForm({
 						{...register("pin")}
 						type="text"
 						placeholder="Enter OTP"
-						className="bg-white dark:bg-sarLinkOrange/10"
+						className="bg-white dark:bg-black"
 					/>
 					{errors.pin && (
 						<p className="text-red-500 text-sm">{errors.pin.message}</p>
@@ -81,9 +84,9 @@ export default function VerifyOTPForm({
 				</Button>
 			</div>
 			<div className="mb-4 text-center text-sm">
-				Go back to{" "}
+				Change{" "}
 				<Link href="signin" className="underline">
-					login
+					phone number
 				</Link>
 			</div>
 		</form>