From 406733b3601ec0071dbf7ee1c0ab7bf42a2da7f1 Mon Sep 17 00:00:00 2001
From: i701 <idhaan701@outlook.com>
Date: Mon, 9 Jun 2025 01:12:16 +0500
Subject: [PATCH] feat: update authentication layout and forms for improved
 user experience; add new dependencies and enhance styling

---
 app/(auth)/auth/layout.tsx                    |  14 +-
 .../auth/verify-otp-registration/page.tsx     |   7 +
 components/auth/login-form.tsx                |   2 +-
 components/auth/signup-form.tsx               | 578 +++++++++---------
 components/ui/phone-input.tsx                 |   2 +-
 components/ui/sheet.tsx                       |   8 +-
 components/ui/sidebar.tsx                     |   6 +-
 components/welcome-banner.tsx                 |  25 +-
 package-lock.json                             |   6 +
 package.json                                  |   1 +
 tailwind.config.ts                            | 184 +++---
 11 files changed, 419 insertions(+), 414 deletions(-)

diff --git a/app/(auth)/auth/layout.tsx b/app/(auth)/auth/layout.tsx
index 458aa5a..90f6a9f 100644
--- a/app/(auth)/auth/layout.tsx
+++ b/app/(auth)/auth/layout.tsx
@@ -1,22 +1,10 @@
-import Image from "next/image";
 
 export default function AuthLayout({
 	children,
 }: { children: React.ReactNode }) {
 	return (
 		<div className="bg-gray-100 dark:bg-black w-full h-screen flex items-center justify-center font-sans">
-			<div className="flex flex-col items-center justify-center w-full h-full ">
-				<Image alt="Sar Link Logo" src="/logo.png" width={100} height={100} />
-				<div className="mt-4 flex flex-col items-center justify-center">
-					<h4 className="font-bold text-xl text-sarLinkOrange dark:text-gray-400">
-						SAR Link Portal
-					</h4>
-					<p className="text-gray-400">
-						Pay for your devices and track your bills.
-					</p>
-				</div>
-				{children}
-			</div>
+			{children}
 		</div>
 	);
 }
diff --git a/app/(auth)/auth/verify-otp-registration/page.tsx b/app/(auth)/auth/verify-otp-registration/page.tsx
index 49d8b05..42e8857 100644
--- a/app/(auth)/auth/verify-otp-registration/page.tsx
+++ b/app/(auth)/auth/verify-otp-registration/page.tsx
@@ -1,7 +1,9 @@
+import { authOptions } from "@/app/auth";
 import VerifyRegistrationOTPForm from "@/components/auth/verify-registration-otp-form";
 import ClientErrorMessage from "@/components/client-error-message";
 import { checkTempIdOrPhone } from "@/queries/authentication";
 import { tryCatch } from "@/utils/tryCatch";
+import { getServerSession } from "next-auth";
 import { redirect } from "next/navigation";
 
 export default async function VerifyRegistrationOTP({
@@ -9,6 +11,11 @@ export default async function VerifyRegistrationOTP({
 }: {
 	searchParams: Promise<{ phone_number: string }>;
 }) {
+	const session = await getServerSession(authOptions)
+	if (session) {
+		// If the user is already logged in, redirect them to the home page
+		return redirect("/");
+	}
 	const phone_number = (await searchParams).phone_number;
 	if (!phone_number) {
 		return redirect("/login");
diff --git a/components/auth/login-form.tsx b/components/auth/login-form.tsx
index d3cd64b..4ed6312 100644
--- a/components/auth/login-form.tsx
+++ b/components/auth/login-form.tsx
@@ -15,7 +15,7 @@ export default function LoginForm() {
 
 	return (
 		<form
-			className="overflow-clip title-bg dark:border-2 w-full max-w-xs mx-auto rounded-lg shadow border mt-4"
+			className="overflow-clip title-bg w-full max-w-xs mx-auto rounded-lg shadow border-2 border-sarLinkOrange/50 dark:border-sarLinkOrange/50 mt-4"
 			action={formAction}
 		>
 			<div className="py-4 px-4">
diff --git a/components/auth/signup-form.tsx b/components/auth/signup-form.tsx
index 64b67e7..43476dd 100644
--- a/components/auth/signup-form.tsx
+++ b/components/auth/signup-form.tsx
@@ -21,6 +21,7 @@ import {
 import type { ApiResponse, Atoll } from "@/lib/backend-types";
 import { getAtolls } from "@/queries/islands";
 import { keepPreviousData, useQuery } from "@tanstack/react-query";
+import Image from "next/image";
 
 export default function SignUpForm() {
 	const { data: atolls } = useQuery<ApiResponse<Atoll>>({
@@ -58,297 +59,322 @@ export default function SignUpForm() {
 					<Link href="login" className="underline">
 						login
 					</Link>
-				</div>
+				</div>-
 			</>
 		);
 	}
 	return (
-		<form
-			action={action}
-			className="max-w-xs mt-2 w-full bg-white dark:bg-transparent dark:border-2 shadow rounded-lg mx-auto"
-		>
-			<div className="py-2 px-4 my-2 space-y-2">
-				<div>
-					<label htmlFor="name" className="text-sm">
-						Name
-					</label>
+		<div className="grid grid-cols-1 lg:grid-cols-2 w-full rounded h-screen overflow-y-scroll relative items-center justify-center">
+			<div className="absolute inset-0 title-bg mask-dir-to-r mask-from-0 mask-via-100 mask-to-100 mask-linear" />
+			<div className="hidden lg:flex relative overflow-hidden dark:text-white text-gray-900">
+				<div className="relative z-10 flex flex-col justify-center items-center p-12 w-full">
+					<div className="max-w-md text-center">
+						{/* Logo */}
+						<div className="mb-8">
+							<div className="w-20 h-20 bg-transparent backdrop-blur-sm rounded-2xl flex items-center justify-center mx-auto mb-4">
+								<Image src="/logo.png" alt="Company Logo" height={1080} width={1080} className="w-12 h-12 text-white" />
+							</div>
+							<h3 className="text-xl font-semibold dark:text-orange-100">SAR Link Portal</h3>
+						</div>
 
-					<Input
-						className={cn(
-							"text-base",
-							actionState?.errors?.fieldErrors.name &&
-								"border-2 border-red-500",
-						)}
-						name="name"
-						type="text"
-						disabled={isPending}
-						defaultValue={(actionState?.payload?.get("name") || "") as string}
-						placeholder="Full Name"
-					/>
-					{actionState?.errors?.fieldErrors.name && (
-						<span className="text-sm inline-block text-red-500">
-							{actionState?.errors?.fieldErrors.name}
-						</span>
-					)}
+						<h1 className="text-4xl font-bold mb-6">Welcome to Our Platform</h1>
+						<p className="text-xl mb-8 dark:text-orange-100">
+							Pay for your devices and track your bills.
+						</p>
+					</div>
 				</div>
-				<div>
-					<label htmlFor="id_card" className="text-sm">
-						ID Card
-					</label>
-					<Input
-						name="id_card"
-						type="text"
-						maxLength={7}
-						disabled={isPending}
-						defaultValue={
-							(actionState?.payload?.get("id_card") || "") as string
-						}
-						className={cn(
-							"text-base",
-							actionState?.errors?.fieldErrors?.id_card &&
-								"border-2 border-red-500",
-						)}
-						placeholder="ID Card"
-					/>
-					{actionState?.errors?.fieldErrors?.id_card?.[0] && (
-						<span className="text-sm inline-block text-red-500">
-							{actionState?.errors.fieldErrors.id_card[0]}
-						</span>
-					)}
-					{actionState?.db_error === "id_card" && (
-						<span className="text-sm inline-block text-red-500">
-							{actionState?.message}
-						</span>
-					)}
-				</div>
-				<div>
-					<div>
-						<label htmlFor="atoll" className="text-sm">
-							Atoll
-						</label>
-						<Select
-							disabled={isPending}
-							onValueChange={(v) => {
-								console.log({ v });
-								setAtoll(
-									atolls?.data.find((atoll) => atoll.id === Number.parseInt(v)),
-								);
-							}}
-							name="atoll_id"
-							value={atoll?.id?.toString() ?? ""}
-						>
-							<SelectTrigger className="w-full">
-								<SelectValue placeholder="Select atoll" />
-							</SelectTrigger>
-							<SelectContent>
-								<SelectGroup>
-									<SelectLabel>Atolls</SelectLabel>
-									{atolls?.data.map((atoll) => (
-										<SelectItem key={atoll.id} value={atoll.id.toString()}>
-											{atoll.name}
-										</SelectItem>
-									))}
-								</SelectGroup>
-							</SelectContent>
-							{actionState?.errors?.fieldErrors?.atoll_id && (
+				{/* Decorative elements */}
+			</div>
+			<form
+				action={action}
+				className="flex flex-col justify-center items-center p-6 lg:p-12 space-y-4 w-full "
+			>
+				<div className="max-w-sm shadow-2xl shadow-sarLinkOrange/20 h-fit my-auto mt-2 w-full bg-white dark:bg-transparent rounded-lg m-auto backdrop-blur-lg self-center border-2 border-sarLinkOrange/10 dark:border-sarLinkOrange/50">
+					<div className="py-2 px-4 my-2 space-y-2">
+						<div className="space-y-2">
+							<label htmlFor="name" className="text-sm font-medium text-slate-700 dark:text-slate-300">
+								Full Name
+							</label>
+
+							<Input
+								className={cn(
+									"text-base",
+									actionState?.errors?.fieldErrors.name &&
+									"border-2 border-red-500",
+								)}
+								name="name"
+								type="text"
+								disabled={isPending}
+								defaultValue={(actionState?.payload?.get("name") || "") as string}
+								placeholder="Full Name"
+							/>
+							{actionState?.errors?.fieldErrors.name && (
 								<span className="text-sm inline-block text-red-500">
-									{actionState?.errors?.fieldErrors?.atoll_id}
+									{actionState?.errors?.fieldErrors.name}
 								</span>
 							)}
-						</Select>
-					</div>
-					<div>
-						<label htmlFor="island" className="text-sm">
-							Island
-						</label>
-						<Select disabled={isPending} name="island_id">
-							<SelectTrigger className="w-full">
-								<SelectValue placeholder="Select island" />
-							</SelectTrigger>
-							<SelectContent>
-								<SelectGroup>
-									<SelectLabel>Islands</SelectLabel>
-									{atoll?.islands?.map((island) => (
-										<SelectItem key={island.id} value={island.id.toString()}>
-											{island.name}
-										</SelectItem>
-									))}
-								</SelectGroup>
-							</SelectContent>
-							{actionState?.errors?.fieldErrors?.island_id && (
+						</div>
+						<div className="space-y-2">
+							<label htmlFor="id_card" className="text-sm font-medium text-slate-700 dark:text-slate-300">
+								ID Card
+							</label>
+							<Input
+								name="id_card"
+								type="text"
+								maxLength={7}
+								disabled={isPending}
+								defaultValue={
+									(actionState?.payload?.get("id_card") || "") as string
+								}
+								className={cn(
+									"text-base",
+									actionState?.errors?.fieldErrors?.id_card &&
+									"border-2 border-red-500",
+								)}
+								placeholder="ID Card"
+							/>
+							{actionState?.errors?.fieldErrors?.id_card?.[0] && (
 								<span className="text-sm inline-block text-red-500">
-									{actionState?.errors?.fieldErrors?.island_id}
+									{actionState?.errors.fieldErrors.id_card[0]}
 								</span>
 							)}
-						</Select>
+							{actionState?.db_error === "id_card" && (
+								<span className="text-sm inline-block text-red-500">
+									{actionState?.message}
+								</span>
+							)}
+						</div>
+						<div>
+							<div className="space-y-2">
+								<label htmlFor="atoll" className="text-sm font-medium text-slate-700 dark:text-slate-300">
+									Atoll
+								</label>
+								<Select
+									disabled={isPending}
+									onValueChange={(v) => {
+										console.log({ v });
+										setAtoll(
+											atolls?.data.find((atoll) => atoll.id === Number.parseInt(v)),
+										);
+									}}
+									name="atoll_id"
+									value={atoll?.id?.toString() ?? ""}
+								>
+									<SelectTrigger className="w-full">
+										<SelectValue placeholder="Select atoll" />
+									</SelectTrigger>
+									<SelectContent>
+										<SelectGroup>
+											<SelectLabel>Atolls</SelectLabel>
+											{atolls?.data.map((atoll) => (
+												<SelectItem key={atoll.id} value={atoll.id.toString()}>
+													{atoll.name}
+												</SelectItem>
+											))}
+										</SelectGroup>
+									</SelectContent>
+									{actionState?.errors?.fieldErrors?.atoll_id && (
+										<span className="text-sm inline-block text-red-500">
+											{actionState?.errors?.fieldErrors?.atoll_id}
+										</span>
+									)}
+								</Select>
+							</div>
+							<div className="space-y-2">
+								<label htmlFor="island" className="text-sm font-medium text-slate-700 dark:text-slate-300">
+									Island
+								</label>
+								<Select disabled={isPending} name="island_id">
+									<SelectTrigger className="w-full">
+										<SelectValue placeholder="Select island" />
+									</SelectTrigger>
+									<SelectContent>
+										<SelectGroup>
+											<SelectLabel>Islands</SelectLabel>
+											{atoll?.islands?.map((island) => (
+												<SelectItem key={island.id} value={island.id.toString()}>
+													{island.name}
+												</SelectItem>
+											))}
+										</SelectGroup>
+									</SelectContent>
+									{actionState?.errors?.fieldErrors?.island_id && (
+										<span className="text-sm inline-block text-red-500">
+											{actionState?.errors?.fieldErrors?.island_id}
+										</span>
+									)}
+								</Select>
+							</div>
+						</div>
+
+						<div className="space-y-2">
+							<label htmlFor="address" className="text-sm font-medium text-slate-700 dark:text-slate-300">
+								Address
+							</label>
+							<Input
+								className={cn(
+									"text-base",
+									actionState?.errors?.fieldErrors?.address &&
+									"border-2 border-red-500",
+								)}
+								disabled={isPending}
+								name="address"
+								defaultValue={
+									(actionState?.payload?.get("address") || "") as string
+								}
+								type="text"
+								placeholder="Address"
+							/>
+							{actionState?.errors?.fieldErrors?.address && (
+								<span className="text-sm inline-block text-red-500">
+									{actionState?.errors?.fieldErrors?.address}
+								</span>
+							)}
+						</div>
+
+						<div className="space-y-2">
+							<label htmlFor="dob" className="text-sm font-medium text-slate-700 dark:text-slate-300">
+								Date of Birth
+							</label>
+							<Input
+								className={cn(
+									"text-base",
+									actionState?.errors?.fieldErrors?.dob &&
+									"border-2 border-red-500",
+								)}
+								name="dob"
+								disabled={isPending}
+								defaultValue={(actionState?.payload?.get("dob") || "") as string}
+								type="date"
+								placeholder="Date of birth"
+							/>
+							{actionState?.errors?.fieldErrors?.dob && (
+								<span className="text-sm inline-block text-red-500">
+									{actionState?.errors?.fieldErrors?.dob}
+								</span>
+							)}
+							{actionState?.db_error === "dob" && (
+								<span className="text-sm inline-block text-red-500">
+									{actionState?.message}
+								</span>
+							)}
+						</div>
+						<div className="space-y-2">
+							<label htmlFor="accNo" className="text-sm font-medium text-slate-700 dark:text-slate-300">
+								Account Number
+							</label>
+
+							<Input
+								className={cn(
+									"text-base",
+									actionState?.errors?.fieldErrors.accNo &&
+									"border-2 border-red-500",
+								)}
+								name="accNo"
+								type="number"
+								disabled={isPending}
+								defaultValue={(actionState?.payload?.get("accNo") || "") as string}
+								placeholder="Account no"
+							/>
+							{actionState?.errors?.fieldErrors.accNo && (
+								<span className="text-sm inline-block text-red-500">
+									{actionState?.errors?.fieldErrors.accNo}
+								</span>
+							)}
+						</div>
+						<div className="space-y-2">
+							<label htmlFor="phone_number" className="text-sm font-medium text-slate-700 dark:text-slate-300">
+								Phone Number
+							</label>
+							<Input
+								id="phone-number"
+								name="phone_number"
+								maxLength={8}
+								disabled={isPending}
+								className={cn(
+									!phoneNumberFromUrl &&
+									actionState?.errors?.fieldErrors?.phone_number &&
+									"border-2 border-red-500 rounded-md",
+								)}
+								defaultValue={NUMBER_WITHOUT_DASH ?? ""}
+								readOnly={Boolean(phoneNumberFromUrl)}
+								placeholder={phoneNumberFromUrl ?? "Phone number"}
+							/>
+						</div>
+						{actionState?.errors?.fieldErrors?.phone_number?.[0] && (
+							<span className="text-sm inline-block text-red-500">
+								{actionState?.errors.fieldErrors.phone_number[0]}
+							</span>
+						)}
+						{actionState?.db_error === "phone_number" && (
+							<span className="text-sm inline-block text-red-500">
+								{actionState?.message}
+							</span>
+						)}
+						<div className="flex flex-col gap-2 items-start justify-start py-2">
+							<div className="flex gap-2 items-center">
+								<input
+									type="checkbox"
+									defaultChecked={
+										((actionState?.payload?.get("terms") || "") as string) === "on"
+									}
+									name="terms"
+									id="terms"
+								/>
+								<label
+									htmlFor="terms"
+									className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+								>
+									<span>i accept</span>
+									<Link className="ml-1 underline" href="">
+										terms and conditions
+									</Link>
+								</label>
+							</div>
+							{actionState?.errors?.fieldErrors?.terms && (
+								<span className="text-sm inline-block text-red-500">
+									{actionState?.errors?.fieldErrors?.terms}
+								</span>
+							)}
+							<div className="flex gap-2 items-center">
+								<input
+									type="checkbox"
+									defaultChecked={
+										((actionState?.payload?.get("policy") || "") as string) === "on"
+									}
+									name="policy"
+									id="terms"
+								/>
+								<label
+									htmlFor="terms"
+									className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+								>
+									<span>i undertand</span>
+									<Link className="ml-1 underline" href="">
+										the privacy policy
+									</Link>
+								</label>
+							</div>
+							{actionState?.errors?.fieldErrors?.policy && (
+								<span className="text-sm inline-block text-red-500">
+									{actionState?.errors?.fieldErrors?.policy}
+								</span>
+							)}
+						</div>
+						<Button disabled={isPending} className="mt-4 w-full" type="submit">
+							{isPending ? <Loader2 className="animate-spin" /> : "Submit"}
+						</Button>
+					</div>
+					<div className="mb-4 text-center text-sm">
+						Already have an account?{" "}
+						<Link href="signin" className="underline">
+							login
+						</Link>
 					</div>
 				</div>
 
-				<div>
-					<label htmlFor="address" className="text-sm">
-						Address
-					</label>
-					<Input
-						className={cn(
-							"text-base",
-							actionState?.errors?.fieldErrors?.address &&
-								"border-2 border-red-500",
-						)}
-						disabled={isPending}
-						name="address"
-						defaultValue={
-							(actionState?.payload?.get("address") || "") as string
-						}
-						type="text"
-						placeholder="Address"
-					/>
-					{actionState?.errors?.fieldErrors?.address && (
-						<span className="text-sm inline-block text-red-500">
-							{actionState?.errors?.fieldErrors?.address}
-						</span>
-					)}
-				</div>
+			</form>
+		</div>
 
-				<div>
-					<label htmlFor="dob" className="text-sm">
-						Date of Birth
-					</label>
-					<Input
-						className={cn(
-							"text-base",
-							actionState?.errors?.fieldErrors?.dob &&
-								"border-2 border-red-500",
-						)}
-						name="dob"
-						disabled={isPending}
-						defaultValue={(actionState?.payload?.get("dob") || "") as string}
-						type="date"
-						placeholder="Date of birth"
-					/>
-					{actionState?.errors?.fieldErrors?.dob && (
-						<span className="text-sm inline-block text-red-500">
-							{actionState?.errors?.fieldErrors?.dob}
-						</span>
-					)}
-					{actionState?.db_error === "dob" && (
-						<span className="text-sm inline-block text-red-500">
-							{actionState?.message}
-						</span>
-					)}
-				</div>
-				<div>
-					<label htmlFor="accNo" className="text-sm">
-						Account Number
-					</label>
-
-					<Input
-						className={cn(
-							"text-base",
-							actionState?.errors?.fieldErrors.accNo &&
-								"border-2 border-red-500",
-						)}
-						name="accNo"
-						type="number"
-						disabled={isPending}
-						defaultValue={(actionState?.payload?.get("accNo") || "") as string}
-						placeholder="Account no"
-					/>
-					{actionState?.errors?.fieldErrors.accNo && (
-						<span className="text-sm inline-block text-red-500">
-							{actionState?.errors?.fieldErrors.accNo}
-						</span>
-					)}
-				</div>
-				<div>
-					<label htmlFor="phone_number" className="text-sm">
-						Phone Number
-					</label>
-					<Input
-						id="phone-number"
-						name="phone_number"
-						maxLength={8}
-						disabled={isPending}
-						className={cn(
-							!phoneNumberFromUrl &&
-								actionState?.errors?.fieldErrors?.phone_number &&
-								"border-2 border-red-500 rounded-md",
-						)}
-						defaultValue={NUMBER_WITHOUT_DASH ?? ""}
-						readOnly={Boolean(phoneNumberFromUrl)}
-						placeholder={phoneNumberFromUrl ?? "Phone number"}
-					/>
-				</div>
-				{actionState?.errors?.fieldErrors?.phone_number?.[0] && (
-					<span className="text-sm inline-block text-red-500">
-						{actionState?.errors.fieldErrors.phone_number[0]}
-					</span>
-				)}
-				{actionState?.db_error === "phone_number" && (
-					<span className="text-sm inline-block text-red-500">
-						{actionState?.message}
-					</span>
-				)}
-				<div className="flex flex-col gap-2 items-start justify-start py-2">
-					<div className="flex gap-2 items-center">
-						<input
-							type="checkbox"
-							defaultChecked={
-								((actionState?.payload?.get("terms") || "") as string) === "on"
-							}
-							name="terms"
-							id="terms"
-						/>
-						<label
-							htmlFor="terms"
-							className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
-						>
-							<span>i accept</span>
-							<Link className="ml-1 underline" href="">
-								terms and conditions
-							</Link>
-						</label>
-					</div>
-					{actionState?.errors?.fieldErrors?.terms && (
-						<span className="text-sm inline-block text-red-500">
-							{actionState?.errors?.fieldErrors?.terms}
-						</span>
-					)}
-					<div className="flex gap-2 items-center">
-						<input
-							type="checkbox"
-							defaultChecked={
-								((actionState?.payload?.get("policy") || "") as string) === "on"
-							}
-							name="policy"
-							id="terms"
-						/>
-						<label
-							htmlFor="terms"
-							className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
-						>
-							<span>i undertand</span>
-							<Link className="ml-1 underline" href="">
-								the privacy policy
-							</Link>
-						</label>
-					</div>
-					{actionState?.errors?.fieldErrors?.policy && (
-						<span className="text-sm inline-block text-red-500">
-							{actionState?.errors?.fieldErrors?.policy}
-						</span>
-					)}
-				</div>
-				<Button disabled={isPending} className="mt-4 w-full" type="submit">
-					{isPending ? <Loader2 className="animate-spin" /> : "Submit"}
-				</Button>
-			</div>
-
-			<div className="mb-4 text-center text-sm">
-				Already have an account?{" "}
-				<Link href="signin" className="underline">
-					login
-				</Link>
-			</div>
-		</form>
 	);
 }
diff --git a/components/ui/phone-input.tsx b/components/ui/phone-input.tsx
index 7863041..70d9d66 100644
--- a/components/ui/phone-input.tsx
+++ b/components/ui/phone-input.tsx
@@ -61,7 +61,7 @@ const InputComponent = React.forwardRef<
 	HTMLInputElement,
 	React.ComponentProps<"input">
 >(({ className, ...props }, ref) => (
-	<Input className={cn("mx-2 bg-white/10", className)} {...props} ref={ref} />
+	<Input className={cn("mx-2 bg-white/10 backdrop-blur-md", className)} {...props} ref={ref} />
 ));
 InputComponent.displayName = "InputComponent";
 
diff --git a/components/ui/sheet.tsx b/components/ui/sheet.tsx
index 272cb72..7909505 100644
--- a/components/ui/sheet.tsx
+++ b/components/ui/sheet.tsx
@@ -1,9 +1,9 @@
 "use client"
 
-import * as React from "react"
 import * as SheetPrimitive from "@radix-ui/react-dialog"
-import { cva, type VariantProps } from "class-variance-authority"
+import { type VariantProps, cva } from "class-variance-authority"
 import { X } from "lucide-react"
+import * as React from "react"
 
 import { cn } from "@/lib/utils"
 
@@ -31,7 +31,7 @@ const SheetOverlay = React.forwardRef<
 SheetOverlay.displayName = SheetPrimitive.Overlay.displayName
 
 const sheetVariants = cva(
-  "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500 data-[state=open]:animate-in data-[state=closed]:animate-out",
+  "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=closed]:duration-150 data-[state=open]:duration-300 data-[state=open]:animate-in data-[state=closed]:animate-out",
   {
     variants: {
       side: {
@@ -51,7 +51,7 @@ const sheetVariants = cva(
 
 interface SheetContentProps
   extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
-    VariantProps<typeof sheetVariants> {}
+  VariantProps<typeof sheetVariants> { }
 
 const SheetContent = React.forwardRef<
   React.ElementRef<typeof SheetPrimitive.Content>,
diff --git a/components/ui/sidebar.tsx b/components/ui/sidebar.tsx
index 32263c0..870ee1c 100644
--- a/components/ui/sidebar.tsx
+++ b/components/ui/sidebar.tsx
@@ -242,7 +242,7 @@ const Sidebar = React.forwardRef<
 				{/* This is what handles the sidebar gap on desktop */}
 				<div
 					className={cn(
-						"duration-75 relative h-svh w-[--sidebar-width] bg-transparent transition-[width] ease-linear",
+						"duration-150 relative h-svh w-[--sidebar-width] bg-transparent transition-[width] ease-linear",
 						"group-data-[collapsible=offcanvas]:w-0",
 						"group-data-[side=right]:rotate-180",
 						variant === "floating" || variant === "inset"
@@ -252,7 +252,7 @@ const Sidebar = React.forwardRef<
 				/>
 				<div
 					className={cn(
-						"duration-75 fixed inset-y-0 z-0 hidden h-svh w-[--sidebar-width] transition-[left,right,width] ease-linear md:flex",
+						"duration-150 fixed inset-y-0 z-0 hidden h-svh w-[--sidebar-width] transition-[left,right,width] ease-linear md:flex",
 						side === "left"
 							? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]"
 							: "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
@@ -457,7 +457,7 @@ const SidebarGroupLabel = React.forwardRef<
 			ref={ref}
 			data-sidebar="group-label"
 			className={cn(
-				"duration-75 flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 outline-none ring-sidebar-ring transition-[margin,opa] ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+				"duration-150 flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 outline-none ring-sidebar-ring transition-[margin,opa] ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
 				"group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
 				className,
 			)}
diff --git a/components/welcome-banner.tsx b/components/welcome-banner.tsx
index 45c121d..78e13fb 100644
--- a/components/welcome-banner.tsx
+++ b/components/welcome-banner.tsx
@@ -1,39 +1,16 @@
 "use client";
 
-import { useEffect, useState } from "react";
 
 interface WelcomeBannerProps {
   firstName?: string | null;
   lastName?: string | null;
 }
 
-const ANIMATION_DURATION_MS = 500;
 export function WelcomeBanner({ firstName, lastName }: WelcomeBannerProps) {
-  const [isMounted, setIsMounted] = useState(true);
-  const [isFadingOut, setIsFadingOut] = useState(false);
-
-  useEffect(() => {
-    const startFadeOutTimer = setTimeout(() => {
-      setIsFadingOut(true);
-    }, 3000);
-    const unmountTimer = setTimeout(() => {
-      setIsMounted(false);
-    }, 3000 + ANIMATION_DURATION_MS);
-
-    return () => {
-      clearTimeout(startFadeOutTimer);
-      clearTimeout(unmountTimer);
-    };
-  }, []);
-
-  if (!isMounted) {
-    return null;
-  }
 
   return (
     <div
-      className={`text-sm font-mono px-2 p-1 bg-green-500/10 text-green-900 dark:text-green-400 ${isFadingOut ? "animate-out fade-out animate-duration-500 animate-ease-out" : "animate-in fade-in"
-        }`}
+      className={"text-sm font-mono px-2 p-1 bg-green-500/10 text-green-900 dark:text-green-400"}
     >
       Welcome,{" "}
       <span className="font-semibold">
diff --git a/package-lock.json b/package-lock.json
index 9eac272..8ea3247 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,6 +10,7 @@
 			"dependencies": {
 				"@faker-js/faker": "^9.3.0",
 				"@hookform/resolvers": "^5.0.1",
+				"@pyncz/tailwind-mask-image": "^2.0.0",
 				"@radix-ui/react-accordion": "^1.2.11",
 				"@radix-ui/react-alert-dialog": "^1.1.2",
 				"@radix-ui/react-checkbox": "^1.1.2",
@@ -856,6 +857,11 @@
 				"node": ">=14"
 			}
 		},
+		"node_modules/@pyncz/tailwind-mask-image": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/@pyncz/tailwind-mask-image/-/tailwind-mask-image-2.0.0.tgz",
+			"integrity": "sha512-BN52RPSp56VIA25ZpLD3SEigwADTrQ6a3Kq8x94rbhU6YP1HpvRjSYtnFenEfGw2nzESvFsNdYT6KKP+JuS73w=="
+		},
 		"node_modules/@radix-ui/number": {
 			"version": "1.1.0",
 			"license": "MIT"
diff --git a/package.json b/package.json
index f12f315..9466a13 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,7 @@
 	"dependencies": {
 		"@faker-js/faker": "^9.3.0",
 		"@hookform/resolvers": "^5.0.1",
+		"@pyncz/tailwind-mask-image": "^2.0.0",
 		"@radix-ui/react-accordion": "^1.2.11",
 		"@radix-ui/react-alert-dialog": "^1.1.2",
 		"@radix-ui/react-checkbox": "^1.1.2",
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 5fe840c..6b6e8aa 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -9,96 +9,96 @@ export default {
 		"./app/**/*.{js,ts,jsx,tsx,mdx}",
 	],
 	theme: {
-    	extend: {
-    		colors: {
-    			sarLinkOrange: '#f49b5b',
-    			background: 'hsl(var(--background))',
-    			foreground: 'hsl(var(--foreground))',
-    			card: {
-    				DEFAULT: 'hsl(var(--card))',
-    				foreground: 'hsl(var(--card-foreground))'
-    			},
-    			popover: {
-    				DEFAULT: 'hsl(var(--popover))',
-    				foreground: 'hsl(var(--popover-foreground))'
-    			},
-    			primary: {
-    				DEFAULT: 'hsl(var(--primary))',
-    				foreground: 'hsl(var(--primary-foreground))'
-    			},
-    			secondary: {
-    				DEFAULT: 'hsl(var(--secondary))',
-    				foreground: 'hsl(var(--secondary-foreground))'
-    			},
-    			muted: {
-    				DEFAULT: 'hsl(var(--muted))',
-    				foreground: 'hsl(var(--muted-foreground))'
-    			},
-    			accent: {
-    				DEFAULT: 'hsl(var(--accent))',
-    				foreground: 'hsl(var(--accent-foreground))'
-    			},
-    			destructive: {
-    				DEFAULT: 'hsl(var(--destructive))',
-    				foreground: 'hsl(var(--destructive-foreground))'
-    			},
-    			border: 'hsl(var(--border))',
-    			input: 'hsl(var(--input))',
-    			ring: 'hsl(var(--ring))',
-    			chart: {
-    				'1': 'hsl(var(--chart-1))',
-    				'2': 'hsl(var(--chart-2))',
-    				'3': 'hsl(var(--chart-3))',
-    				'4': 'hsl(var(--chart-4))',
-    				'5': 'hsl(var(--chart-5))'
-    			},
-    			sidebar: {
-    				DEFAULT: 'hsl(var(--sidebar-background))',
-    				foreground: 'hsl(var(--sidebar-foreground))',
-    				primary: 'hsl(var(--sidebar-primary))',
-    				'primary-foreground': 'hsl(var(--sidebar-primary-foreground))',
-    				accent: 'hsl(var(--sidebar-accent))',
-    				'accent-foreground': 'hsl(var(--sidebar-accent-foreground))',
-    				border: 'hsl(var(--sidebar-border))',
-    				ring: 'hsl(var(--sidebar-ring))'
-    			}
-    		},
-    		borderRadius: {
-    			lg: 'var(--radius)',
-    			md: 'calc(var(--radius) - 2px)',
-    			sm: 'calc(var(--radius) - 4px)'
-    		},
-    		fontFamily: {
-    			sans: [
-    				'var(--font-barlow)'
-    			],
-    			mono: [
-    				'var(--font-mono)'
-    			]
-    		},
-    		keyframes: {
-    			'accordion-down': {
-    				from: {
-    					height: '0'
-    				},
-    				to: {
-    					height: 'var(--radix-accordion-content-height)'
-    				}
-    			},
-    			'accordion-up': {
-    				from: {
-    					height: 'var(--radix-accordion-content-height)'
-    				},
-    				to: {
-    					height: '0'
-    				}
-    			}
-    		},
-    		animation: {
-    			'accordion-down': 'accordion-down 0.2s ease-out',
-    			'accordion-up': 'accordion-up 0.2s ease-out'
-    		}
-    	}
-    },
-	plugins: [tailwindcssAnimate, tailwindcssMotion],
+		extend: {
+			colors: {
+				sarLinkOrange: "#f49b5b",
+				background: "hsl(var(--background))",
+				foreground: "hsl(var(--foreground))",
+				card: {
+					DEFAULT: "hsl(var(--card))",
+					foreground: "hsl(var(--card-foreground))",
+				},
+				popover: {
+					DEFAULT: "hsl(var(--popover))",
+					foreground: "hsl(var(--popover-foreground))",
+				},
+				primary: {
+					DEFAULT: "hsl(var(--primary))",
+					foreground: "hsl(var(--primary-foreground))",
+				},
+				secondary: {
+					DEFAULT: "hsl(var(--secondary))",
+					foreground: "hsl(var(--secondary-foreground))",
+				},
+				muted: {
+					DEFAULT: "hsl(var(--muted))",
+					foreground: "hsl(var(--muted-foreground))",
+				},
+				accent: {
+					DEFAULT: "hsl(var(--accent))",
+					foreground: "hsl(var(--accent-foreground))",
+				},
+				destructive: {
+					DEFAULT: "hsl(var(--destructive))",
+					foreground: "hsl(var(--destructive-foreground))",
+				},
+				border: "hsl(var(--border))",
+				input: "hsl(var(--input))",
+				ring: "hsl(var(--ring))",
+				chart: {
+					"1": "hsl(var(--chart-1))",
+					"2": "hsl(var(--chart-2))",
+					"3": "hsl(var(--chart-3))",
+					"4": "hsl(var(--chart-4))",
+					"5": "hsl(var(--chart-5))",
+				},
+				sidebar: {
+					DEFAULT: "hsl(var(--sidebar-background))",
+					foreground: "hsl(var(--sidebar-foreground))",
+					primary: "hsl(var(--sidebar-primary))",
+					"primary-foreground": "hsl(var(--sidebar-primary-foreground))",
+					accent: "hsl(var(--sidebar-accent))",
+					"accent-foreground": "hsl(var(--sidebar-accent-foreground))",
+					border: "hsl(var(--sidebar-border))",
+					ring: "hsl(var(--sidebar-ring))",
+				},
+			},
+			borderRadius: {
+				lg: "var(--radius)",
+				md: "calc(var(--radius) - 2px)",
+				sm: "calc(var(--radius) - 4px)",
+			},
+			fontFamily: {
+				sans: ["var(--font-barlow)"],
+				mono: ["var(--font-mono)"],
+			},
+			keyframes: {
+				"accordion-down": {
+					from: {
+						height: "0",
+					},
+					to: {
+						height: "var(--radix-accordion-content-height)",
+					},
+				},
+				"accordion-up": {
+					from: {
+						height: "var(--radix-accordion-content-height)",
+					},
+					to: {
+						height: "0",
+					},
+				},
+			},
+			animation: {
+				"accordion-down": "accordion-down 0.2s ease-out",
+				"accordion-up": "accordion-up 0.2s ease-out",
+			},
+		},
+	},
+	plugins: [
+		tailwindcssAnimate,
+		tailwindcssMotion,
+		require("@pyncz/tailwind-mask-image"),
+	],
 } satisfies Config;