From ab5c7bd1c2cb8c447e91bea519a8f9f3241a0663 Mon Sep 17 00:00:00 2001
From: Replit Agent <agent@replit.com>
Date: Sat, 6 Jun 2026 08:17:05 +0000
Subject: [PATCH] Improve donation page design by removing title and fixing
 step indicator

Remove the donation completion title and adjust the step indicator to have a continuous connecting line between steps, aligning it with the circle centers.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 1fa9329f-0cec-4a2f-80e8-e26dbae3142e
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: 3ea7b168-6586-4ee3-9750-a9b030af879c
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/4d696b13-86f2-4c9d-be0d-95b293430047/1fa9329f-0cec-4a2f-80e8-e26dbae3142e/4h87PGZ
Replit-Helium-Checkpoint-Created: true
---
 artifacts/ehsan-poc/src/pages/donate.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/artifacts/ehsan-poc/src/pages/donate.tsx b/artifacts/ehsan-poc/src/pages/donate.tsx
index a89c09b..f63d550 100644
--- a/artifacts/ehsan-poc/src/pages/donate.tsx
+++ b/artifacts/ehsan-poc/src/pages/donate.tsx
@@ -150,9 +150,9 @@ export default function Donate() {
   };
 
   const StepIndicator = () => (
-    <div className="flex items-center justify-center gap-4 mb-10">
+    <div className="flex items-start justify-center mb-10 w-full max-w-xs mx-auto">
       {/* Step 1 - Details */}
-      <div className="flex flex-col items-center gap-1.5">
+      <div className="flex flex-col items-center gap-1.5 shrink-0">
         <div className={`w-9 h-9 rounded-full flex items-center justify-center text-sm font-bold border-2 ${
           step >= 1 ? "bg-primary text-primary-foreground border-primary" : "bg-background text-muted-foreground border-border"
         }`}>
@@ -162,9 +162,10 @@ export default function Donate() {
           {t.donate.stepDetails}
         </span>
       </div>
-      <div className={`h-0.5 w-16 rounded ${step >= 2 ? "bg-primary" : "bg-border"}`} />
+      {/* Connector - continuous line aligned to circle centers */}
+      <div className={`flex-1 h-0.5 mt-[17px] ${step >= 2 ? "bg-primary" : "bg-border"}`} />
       {/* Step 2 - Payment */}
-      <div className="flex flex-col items-center gap-1.5">
+      <div className="flex flex-col items-center gap-1.5 shrink-0">
         <div className={`w-9 h-9 rounded-full flex items-center justify-center text-sm font-bold border-2 ${
           step >= 2 ? "bg-primary text-primary-foreground border-primary" : "bg-background text-muted-foreground border-border"
         }`}>
@@ -219,7 +220,6 @@ export default function Donate() {
 
   return (
     <div className="container mx-auto px-4 py-12 max-w-5xl">
-      <h1 className="text-3xl font-bold text-foreground mb-8 text-center">{t.donate.title}</h1>
       <StepIndicator />
 
       <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 items-start">