feat(stepper): implement reusable stepper component with navigation and validation

src/app/shared/components/stepper/stepper.component.html

@@ -0,0 +1,43 @@
+<div class="stepper-container">
+
+  <!-- Horizontal indicator bar -->
+  <div class="stepper-header">
+    @for (step of steps(); track step; let i = $index; let last = $last) {
+      <div
+        class="stepper-header__item"
+        [ngClass]="{
+          'is-active': currentStepIndex() === i,
+          'is-completed': currentStepIndex() > i
+        }"
+      >
+        <!-- Connecting line before (except first) -->
+        @if (i > 0) {
+          <div class="stepper-header__line" [ngClass]="{ 'is-completed': currentStepIndex() > i - 1 }"></div>
+        }
+
+        <!-- Circle indicator -->
+        <button
+          class="stepper-header__circle"
+          [attr.aria-label]="step.label()"
+          [disabled]="currentStepIndex() <= i"
+          (click)="goToStep(i)"
+        >
+          @if (currentStepIndex() > i) {
+            <i class="fa-solid fa-check"></i>
+          } @else {
+            <span>{{ i + 1 }}</span>
+          }
+        </button>
+
+        <!-- Label -->
+        <span class="stepper-header__label">{{ step.label() }}</span>
+      </div>
+    }
+  </div>
+
+  <!-- Step content panel: only renders the active step's projected content -->
+  <div class="stepper-body">
+    <ng-content></ng-content>
+  </div>
+
+</div>