Create event creation structuring and polishing

src/routes/private/events/event/new/components/StepNavigator.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+	// Props
+	let { currentStep, totalSteps, stepTitle } = $props<{
+		currentStep: number;
+		totalSteps: number;
+	}>();
+</script>
+
+<div class="mb-8">
+    <div class="flex items-center justify-center gap-4 w-full">
+		{#each Array(totalSteps) as _, index}
+			<div class="flex items-center gap-2">
+				<div class="w-8 h-8 rounded-full flex items-center justify-center text-sm font-medium {
+					index === currentStep ? 'bg-blue-600 text-white' :
+					index < currentStep ? 'bg-green-600 text-white' :
+					'bg-gray-200 text-gray-600'
+				}">
+					{index + 1}
+				</div>
+				{#if index < totalSteps - 1}
+					<div class="w-10 h-1 rounded {
+						index < currentStep ? 'bg-green-600' : 'bg-gray-200'
+					}"></div>
+				{/if}
+			</div>
+		{/each}
+	</div>
+</div>