Update donation screen design to match reference

Modify donation page UI to align with provided design, including adjusting card dimensions, border colors, text alignment, and beneficiary count.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 1fa9329f-0cec-4a2f-80e8-e26dbae3142e
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: 4689e9bb-3c96-48c6-9a74-9cfbcd5dd8d8
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/4d696b13-86f2-4c9d-be0d-95b293430047/1fa9329f-0cec-4a2f-80e8-e26dbae3142e/gmzM42I
Replit-Helium-Checkpoint-Created: true

artifacts/ehsan-poc/src/pages/donate.tsx

@@ -125,7 +125,7 @@ export default function Donate() {
       visits: 8000 + (h % 15000),
       donations: 1500 + ((h >> 3) % 22000),
       beneficiaries: 5 + (h % 30),
-      totalBeneficiaries: 40,
+      totalBeneficiaries: 60,
       lastDonationSeconds: 11 + (h % 49),
     };
   }, [params.id]);
@@ -535,16 +535,16 @@ export default function Donate() {
         ].map(({ icon: Icon, label, value, unit }) => (
           <div
             key={label}
-            className="flex items-center justify-between gap-4 rounded-2xl border border-[#E3EEE8] bg-white p-5"
+            className="flex items-center gap-4 rounded-2xl border border-gray-200 bg-white px-6 py-7"
           >
-            <div className="min-w-0">
+            <div className="flex-1 min-w-0 text-center">
-              <p className="text-sm text-[#1B8354] mb-2">{label}</p>
+              <p className="text-sm text-[#1B8354] mb-2.5">{label}</p>
-              <p className="flex items-baseline gap-1.5 flex-wrap font-bold text-foreground text-xl">
+              <p className="flex items-baseline justify-center gap-1.5 flex-wrap font-bold text-foreground text-2xl">
                 <span>{value}</span>
-                <span className="text-xs font-normal text-[#1B8354]">{unit}</span>
+                <span className="text-sm font-normal text-[#1B8354]">{unit}</span>
               </p>
             </div>
-            <div className="flex h-12 w-12 shrink-0 items-center justify-center rounded-full bg-[#EAF5EF] text-[#1B8354]">
+            <div className="flex h-11 w-11 shrink-0 items-center justify-center rounded-full bg-[#EAF5EF] text-[#1B8354]">
               <Icon className="h-5 w-5" />
             </div>
           </div>