From a70edaf09896a629f83e2dbf2517adfc7b3b0b7d Mon Sep 17 00:00:00 2001
From: "Builder.io" <builder-bot@builder.io>
Date: Wed, 5 Nov 2025 06:50:49 +0000
Subject: [PATCH] completionId: cgen-836084d94b8d42aab43e78d56da7f759

cgen-836084d94b8d42aab43e78d56da7f759
---
 client/pages/Community.tsx | 39 +++++++++++++++++++++++++++++++++-----
 1 file changed, 34 insertions(+), 5 deletions(-)

diff --git a/client/pages/Community.tsx b/client/pages/Community.tsx
index 0dd0e699..71680aa9 100644
--- a/client/pages/Community.tsx
+++ b/client/pages/Community.tsx
@@ -1981,18 +1981,47 @@ export default function Community() {
                               {newMemberSteps.map((step) => {
                                 const Icon = step.icon;
                                 return (
-                                  <li key={step.id} className="flex gap-4">
-                                    <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-aethex-500/10 text-aethex-300">
-                                      <Icon className="h-5 w-5" />
+                                  <li key={step.id} className="flex gap-4 group">
+                                    <div className={cn(
+                                      "flex h-10 w-10 items-center justify-center rounded-lg transition-all",
+                                      step.completed
+                                        ? "bg-emerald-500/20 text-emerald-400"
+                                        : "bg-aethex-500/10 text-aethex-300"
+                                    )}>
+                                      {step.completed ? (
+                                        <CheckCircle className="h-5 w-5" />
+                                      ) : (
+                                        <Icon className="h-5 w-5" />
+                                      )}
                                     </div>
-                                    <div className="space-y-1">
-                                      <p className="font-semibold text-foreground">
+                                    <div className="space-y-1 flex-1">
+                                      <p className={cn(
+                                        "font-semibold",
+                                        step.completed ? "text-emerald-400 line-through" : "text-foreground"
+                                      )}>
                                         {step.title}
                                       </p>
                                       <p className="text-sm text-muted-foreground">
                                         {step.description}
                                       </p>
                                     </div>
+                                    {!step.completed && (
+                                      <Button
+                                        asChild
+                                        variant="ghost"
+                                        size="sm"
+                                        className="opacity-0 group-hover:opacity-100 transition-opacity"
+                                      >
+                                        <Link to="/onboarding">
+                                          Complete
+                                        </Link>
+                                      </Button>
+                                    )}
+                                    {step.completed && (
+                                      <Badge variant="outline" className="border-emerald-500/30 bg-emerald-500/10 text-emerald-400">
+                                        Done
+                                      </Badge>
+                                    )}
                                   </li>
                                 );
                               })}