feat: enhance login page design and functionality by integrating new components, updating styles, and improving user experience

apps/web/src/lib/components/login/LoginInput.svelte

@@ -0,0 +1,62 @@
+<script lang="ts">
+	import { Field } from '@ark-ui/svelte/field';
+	import type { Snippet } from 'svelte';
+	import type { HTMLInputAttributes } from 'svelte/elements';
+
+	interface Props {
+		id: string;
+		label: string;
+		type?: string;
+		placeholder?: string;
+		autocomplete?: HTMLInputAttributes['autocomplete'];
+		disabled?: boolean;
+		required?: boolean;
+		error?: string | null;
+		right?: Snippet;
+		value?: string;
+	}
+
+	let {
+		id,
+		label,
+		type = 'text',
+		placeholder = '',
+		autocomplete,
+		disabled = false,
+		required = false,
+		error = null,
+		right,
+		value = $bindable('')
+	}: Props = $props();
+
+	const invalid = $derived(!!error);
+</script>
+
+<Field.Root {invalid} {required} class="space-y-2">
+	<div class="flex items-center justify-between gap-3">
+		<Field.Label
+			for={id}
+			class="text-base-content/60 text-xs font-semibold tracking-wider uppercase"
+		>
+			{label}
+		</Field.Label>
+		{@render right?.()}
+	</div>
+
+	<div class="group relative">
+		<Field.Input
+			{id}
+			{type}
+			{placeholder}
+			{disabled}
+			{autocomplete}
+			{required}
+			bind:value
+			class="border-base-content/10 bg-base-200/25 text-base-content placeholder-base-content/40 focus:border-primary/50 focus:bg-base-200/35 focus:ring-primary/20 w-full rounded-xl border px-4 py-3 transition-all duration-300 focus:ring-2 focus:outline-none disabled:cursor-not-allowed disabled:opacity-60"
+		/>
+	</div>
+
+	{#if error}
+		<Field.ErrorText class="text-error text-sm font-medium">{error}</Field.ErrorText>
+	{/if}
+</Field.Root>