From c91ed1e4c5c3a65f55983402cdd566956798e097 Mon Sep 17 00:00:00 2001
From: "Builder.io" <builder-bot@builder.io>
Date: Tue, 30 Sep 2025 21:59:37 +0000
Subject: [PATCH] Insert achievement badge block

cgen-f0b29843ada04882a73df227725547d0
---
 client/components/onboarding/Welcome.tsx | 40 ++++++++++++++++++++++++
 1 file changed, 40 insertions(+)

diff --git a/client/components/onboarding/Welcome.tsx b/client/components/onboarding/Welcome.tsx
index 11d86066..a73b802e 100644
--- a/client/components/onboarding/Welcome.tsx
+++ b/client/components/onboarding/Welcome.tsx
@@ -189,6 +189,46 @@ export default function Welcome({
         </CardContent>
       </Card>
 
+      {/* Achievement Badge */}
+      {achievement && (
+        <Card className="max-w-2xl mx-auto border border-emerald-500/40 bg-emerald-500/10">
+          <CardHeader className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+            <div className="flex items-center gap-3">
+              <div className="flex h-12 w-12 items-center justify-center rounded-full bg-emerald-500 text-2xl">
+                {achievement.icon || "🎖️"}
+              </div>
+              <div>
+                <CardTitle className="text-base text-emerald-50">
+                  Achievement Unlocked
+                </CardTitle>
+                <CardDescription className="text-xs text-emerald-100/80">
+                  {achievement.name}
+                </CardDescription>
+              </div>
+            </div>
+            <Badge className="bg-emerald-600/90 text-white border border-emerald-500/40">
+              AeThex Passport
+            </Badge>
+          </CardHeader>
+          <CardContent className="space-y-3 text-sm text-emerald-100/90">
+            {achievement.description && <p>{achievement.description}</p>}
+            {typeof achievement.xp_reward === "number" && achievement.xp_reward > 0 && (
+              <div className="text-xs uppercase tracking-wider text-emerald-200">
+                +{achievement.xp_reward} XP added to your passport progression
+              </div>
+            )}
+            <div className="flex flex-wrap gap-2">
+              <Badge variant="outline" className="border-emerald-500/40 text-emerald-100">
+                <ShieldCheck className="mr-1 h-3.5 w-3.5" /> Profile Verified
+              </Badge>
+              <Badge variant="outline" className="border-emerald-500/40 text-emerald-100">
+                <Sparkle className="mr-1 h-3.5 w-3.5" /> Passport Updated
+              </Badge>
+            </div>
+          </CardContent>
+        </Card>
+      )}
+
       {/* Next Steps */}
       <div className="max-w-2xl mx-auto space-y-4">
         <h3 className="text-lg font-semibold text-center">What's Next?</h3>