feat: add selections summary panel and improve stepper navigation

- Added SelectionsSummary component to display user's choices in real-time across all steps
- Implemented clickable step indicators in QuoteStepper allowing navigation to previously visited steps
- Added aria-pressed attributes to all interactive buttons for better accessibility
- Enhanced QuoteStepper with optional helper text support for contextual guidance
- Minor text improvement: changed "like" to "such as" in budget mismatch message

Author: daniel-iliesh

app/hire-me/page.tsx

@@ -10,6 +10,7 @@ import { TimelineStep } from "src/features/hireme/components/TimelineStep";
 import { BudgetStep } from "src/features/hireme/components/BudgetStep";
 import { ContactStep } from "src/features/hireme/components/ContactStep";
 import { PriceSummary } from "src/features/hireme/components/PriceSummary";
+import { SelectionsSummary } from "src/features/hireme/components/SelectionsSummary";
 
 export default function HireMePage() {
   const {
@@ -29,6 +30,7 @@ export default function HireMePage() {
     buildPayload,
     nextStep,
     prevStep,
+    goToStep,
   } = useQuoteBuilder();
 
   const [isSubmitting, setIsSubmitting] = useState(false);
@@ -39,6 +41,10 @@ export default function HireMePage() {
     return roundedFinalPrice >= range.min && roundedFinalPrice <= max;
   }) ?? null;
 
+  const projectTypeLabel = state.projectType
+    ? projectTypes.find((type) => type.id === state.projectType)?.label ?? null
+    : null;
+
   async function handleSubmit() {
     try {
       setIsSubmitting(true);
@@ -64,6 +70,7 @@ export default function HireMePage() {
       estimatedTotal={roundedFinalPrice}
       onNext={nextStep}
       onPrev={prevStep}
+      onStepChange={goToStep}
       canGoNext={
         state.currentStep === 6
           ? false
@@ -85,6 +92,15 @@ export default function HireMePage() {
           budgetMismatch={state.budgetMismatch}
         />
 
+        <SelectionsSummary
+          projectType={state.projectType}
+          projectTypeLabel={projectTypeLabel}
+          selectedFeatures={state.selectedFeatures}
+          complexity={state.complexity}
+          timeline={state.timeline}
+          budgetRange={state.budgetRange}
+        />
+
         {state.currentStep === 1 && (
           <ProjectTypeStep
             projectTypes={projectTypes}

src/features/hireme/components/BudgetStep.tsx

@@ -47,6 +47,7 @@ export function BudgetStep({
                   ? "border-green-500 bg-green-500/10 text-neutral-100"
                   : "border-neutral-800 bg-neutral-950/40 text-neutral-200 hover:border-neutral-700"
               }`}
+              aria-pressed={isActive}
             >
               <span className="font-semibold flex items-center gap-1">
                 {range.label}
@@ -72,6 +73,7 @@ export function BudgetStep({
           className={`flex flex-col items-start rounded-lg border px-4 py-3 text-left text-sm transition focus:outline-none focus:ring-2 focus:ring-green-500 ${
             !selectedRange ? "border-green-500 bg-green-500/10 text-neutral-100" : "border-neutral-800 bg-neutral-950/40 text-neutral-200 hover:border-neutral-700"
           }`}
+          aria-pressed={!selectedRange}
         >
           <span className="font-semibold">Not sure yet</span>
           <span className="mt-1 text-xs text-neutral-400">
@@ -82,7 +84,7 @@ export function BudgetStep({
 
       {budgetMismatch && selectedRange && (
         <p className="text-xs text-amber-300">
-          Your selections would typically land above this range. I&apos;ll suggest options like
+          Your selections would typically land above this range. I&apos;ll suggest options such as
           prioritising MVP features or using a more flexible timeline.
         </p>
       )}

src/features/hireme/components/ComplexityStep.tsx

@@ -77,6 +77,7 @@ export function ComplexityStep({ projectType, selected, onSelect }: ComplexitySt
                   ? "border-green-500 bg-green-500/10 text-neutral-100"
                   : "border-neutral-800 bg-neutral-950/40 text-neutral-200 hover:border-neutral-700"
               }`}
+              aria-pressed={isActive}
             >
               <span className="font-semibold flex items-center gap-1">
                 {labels[level]}

src/features/hireme/components/FeaturesStep.tsx

@@ -72,6 +72,7 @@ export function FeaturesStep({
                       ? "border-green-500 bg-green-500/10 text-neutral-100"
                       : "border-neutral-800 bg-neutral-950/40 text-neutral-200 hover:border-neutral-700"
                   }`}
+                  aria-pressed={checked}
                 >
                   <span className="font-medium">{feature.label}</span>
                   {feature.description && (

src/features/hireme/components/ProjectTypeStep.tsx

@@ -26,6 +26,7 @@ export function ProjectTypeStep({ projectTypes, selectedId, onSelect }: ProjectT
                   ? "border-green-500 bg-green-500/10 text-neutral-100"
                   : "border-neutral-800 bg-neutral-950/40 text-neutral-200 hover:border-neutral-700"
               }`}
+              aria-pressed={isActive}
             >
               <span className="font-semibold">{type.label}</span>
               <span className="mt-1 text-xs text-neutral-400">{type.description}</span>

src/features/hireme/components/QuoteStepper.tsx

@@ -10,6 +10,8 @@ interface QuoteStepperProps {
   onNext: () => void;
   onPrev: () => void;
   canGoNext: boolean;
+  helperText?: string | null;
+  onStepChange?: (step: number) => void;
 }
 
 export function QuoteStepper({
@@ -20,6 +22,8 @@ export function QuoteStepper({
   onNext,
   onPrev,
   canGoNext,
+  helperText,
+  onStepChange,
 }: QuoteStepperProps) {
   return (
     <section className="space-y-6">
@@ -31,32 +35,67 @@ export function QuoteStepper({
         </p>
       </header>
 
-      <div className="flex items-center justify-between text-xs text-neutral-500">
-        <span>
-          Step {currentStep} of {totalSteps}
-        </span>
-        <span>Estimated total: €{estimatedTotal.toLocaleString()}</span>
+      <div className="flex flex-col gap-2 text-xs text-neutral-500">
+        <div className="flex items-center justify-between">
+          <span>
+            Step {currentStep} of {totalSteps}
+          </span>
+          <span>Estimated total: €{estimatedTotal.toLocaleString()}</span>
+        </div>
+        <div className="flex gap-1" aria-label="Quote builder steps">
+          {Array.from({ length: totalSteps }, (_, index) => {
+            const stepNumber = index + 1;
+            const isCurrent = stepNumber === currentStep;
+            const isVisited = stepNumber <= currentStep;
+
+            const canClick = !!onStepChange && stepNumber <= currentStep;
+
+            return (
+              <button
+                key={stepNumber}
+                type="button"
+                onClick={canClick ? () => onStepChange(stepNumber) : undefined}
+                disabled={!canClick}
+                aria-current={isCurrent ? "step" : undefined}
+                className={`flex-1 rounded-full border px-0.5 py-1 text-[10px] font-medium transition focus:outline-none focus:ring-1 focus:ring-green-500 ${
+                  isCurrent
+                    ? "border-green-500 bg-green-500/20 text-green-200"
+                    : isVisited
+                    ? "border-neutral-700 bg-neutral-900 text-neutral-200 hover:border-neutral-500"
+                    : "border-neutral-900 bg-neutral-950 text-neutral-600"
+                }`}
+              >
+                {stepNumber}
+              </button>
+            );
+          })}
+        </div>
       </div>
 
       <div>{children}</div>
 
-      <footer className="flex justify-between border-t border-neutral-800 pt-4">
-        <button
+      <footer className="flex flex-col gap-2 border-t border-neutral-800 pt-4">
+        {helperText && (
+          <p className="text-[11px] text-neutral-500">{helperText}</p>
+        )}
+        <div className="flex justify-between">
+          <button
           type="button"
           onClick={onPrev}
           disabled={currentStep === 1}
           className="rounded-md border border-neutral-700 px-3 py-2 text-xs font-medium text-neutral-300 transition hover:border-neutral-500 disabled:cursor-not-allowed disabled:border-neutral-900 disabled:text-neutral-600"
-        >
-          Back
-        </button>
-        <button
-          type="button"
-          onClick={onNext}
-          disabled={!canGoNext}
-          className="rounded-md bg-green-500 px-4 py-2 text-xs font-semibold text-white shadow-sm transition hover:bg-green-600 disabled:cursor-not-allowed disabled:bg-neutral-700"
-        >
-          Continue
-        </button>
+          >
+            Back
+          </button>
+          <button
+            type="button"
+            onClick={onNext}
+            disabled={!canGoNext}
+            className="rounded-md bg-green-500 px-4 py-2 text-xs font-semibold text-white shadow-sm transition hover:bg-green-600 disabled:cursor-not-allowed disabled:bg-neutral-700"
+          >
+            Continue
+          </button>
+        </div>
       </footer>
     </section>
   );

src/features/hireme/components/SelectionsSummary.tsx

@@ -0,0 +1,100 @@
+"use client";
+
+import { BudgetRangeDefinition, ComplexityLevel, FeatureDefinition, ProjectType, TimelineChoice } from "../types";
+
+interface SelectionsSummaryProps {
+  projectType: ProjectType | null;
+  projectTypeLabel: string | null;
+  selectedFeatures: FeatureDefinition[];
+  complexity: ComplexityLevel;
+  timeline: TimelineChoice;
+  budgetRange: BudgetRangeDefinition | null;
+}
+
+function formatTimelineLabel(timeline: TimelineChoice): string {
+  switch (timeline) {
+    case "rush":
+      return "Rush";
+    case "standard":
+      return "Standard";
+    case "flexible":
+      return "Flexible";
+    case "extended":
+      return "Extended";
+    case "not-sure":
+    default:
+      return "Not sure yet";
+  }
+}
+
+export function SelectionsSummary({
+  projectType,
+  projectTypeLabel,
+  selectedFeatures,
+  complexity,
+  timeline,
+  budgetRange,
+}: SelectionsSummaryProps) {
+  const featureCount = selectedFeatures.length;
+  const visibleFeatures = selectedFeatures
+    .filter((feature) => !feature.isBase)
+    .slice(0, 3);
+  const remainingFeatures = Math.max(0, selectedFeatures.filter((f) => !f.isBase).length - visibleFeatures.length);
+
+  return (
+    <section className="space-y-2 rounded-lg border border-neutral-800 bg-neutral-950/40 p-3 text-[11px] text-neutral-300">
+      <div className="flex items-center justify-between">
+        <span className="font-semibold text-neutral-100">Your choices so far</span>
+        {projectType && (
+          <span className="rounded-full border border-neutral-700 px-2 py-0.5 text-[10px] uppercase tracking-wide text-neutral-300">
+            Step preview
+          </span>
+        )}
+      </div>
+
+      {!projectType && (
+        <p className="text-[11px] text-neutral-500">
+          Start by choosing what you need built. I&apos;ll keep a running summary of your choices here.
+        </p>
+      )}
+
+      {projectType && (
+        <div className="grid grid-cols-1 gap-2 sm:grid-cols-2">
+          <div className="space-y-1">
+            <div className="flex items-center justify-between">
+              <span className="text-neutral-400">Project type</span>
+              <span className="font-medium text-neutral-100">{projectTypeLabel}</span>
+            </div>
+            <div className="flex items-center justify-between">
+              <span className="text-neutral-400">Features</span>
+              <span className="font-medium text-neutral-100">{featureCount} selected</span>
+            </div>
+            {visibleFeatures.length > 0 && (
+              <p className="text-[11px] text-neutral-500">
+                {visibleFeatures.map((feature) => feature.label).join(", ")}
+                {remainingFeatures > 0 && ` +${remainingFeatures} more`}
+              </p>
+            )}
+          </div>
+
+          <div className="space-y-1">
+            <div className="flex items-center justify-between">
+              <span className="text-neutral-400">Complexity</span>
+              <span className="font-medium text-neutral-100 capitalize">{complexity}</span>
+            </div>
+            <div className="flex items-center justify-between">
+              <span className="text-neutral-400">Timeline</span>
+              <span className="font-medium text-neutral-100">{formatTimelineLabel(timeline)}</span>
+            </div>
+            <div className="flex items-center justify-between">
+              <span className="text-neutral-400">Budget</span>
+              <span className="font-medium text-neutral-100">
+                {budgetRange ? budgetRange.label : "Not set yet"}
+              </span>
+            </div>
+          </div>
+        </div>
+      )}
+    </section>
+  );
+}

src/features/hireme/components/TimelineStep.tsx

@@ -85,6 +85,7 @@ export function TimelineStep({
                   ? "border-green-500 bg-green-500/10 text-neutral-100"
                   : "border-neutral-800 bg-neutral-950/40 text-neutral-200 hover:border-neutral-700"
               }`}
+              aria-pressed={isActive}
             >
               <span className="font-semibold">{option.label}</span>
               <span className="mt-1 text-xs text-neutral-400">{option.description}</span>

src/features/hireme/docs/TODO.md

@@ -37,7 +37,7 @@ Create reusable components under `src/features/hireme/components`:
 
 - [x] **Step navigation / layout**
   - [x] `QuoteStepper` shell that renders the current step and controls navigation.
-  - [x] Progress indicator ("Step X of 6").
+  - [x] Progress indicator ("Step X of 6") with clickable step numbers (back/visited steps).
   - [x] Live price summary panel (non-sticky version).
 
 - [x] **Step 1 – Project Type**