feat: update profile UI visual hierachy

frontend/components/profile/index.tsx

@@ -218,10 +218,10 @@ function ProfileCard({
           </TooltipProvider>
         </div>
       )}
-      <CardContent className="flex flex-col gap-4 items-center pt-6">
-        <Avatar name={name} avatarUrl={avatarUrl} className="size-36" />
-
+      <CardContent className="flex flex-col gap-4 pt-6">
         {isEditing ? (
+          <div className="flex flex-col gap-2 items-center ">
+            <Avatar name={name} avatarUrl={avatarUrl} className="size-36" />
             <EditProfileForm
               {...{
                 name,
@@ -233,31 +233,20 @@ function ProfileCard({
                 toggleEdit,
               }}
             />
+          </div>
         ) : (
-          <div className="flex flex-col gap-2.5 items-center">
-            <div className="space-y-1.5">
-              <div className="">
+          <>
+            <div className="flex flex-col gap-2 items-center">
+              <Avatar name={name} avatarUrl={avatarUrl} className="size-36" />
+              <div className="space-y-1">
                 <CardTitle className="text-2xl text-center">{name}</CardTitle>
                 <CardDescription className="text-center">{`@${username}`}</CardDescription>
               </div>
-              {typeof generations === "number" && (
-                <div className="flex justify-center">
-                  <SubscriptionBadge
-                    generations={generations}
-                    tier={tier as keyof typeof TIERS}
-                  />
-                </div>
-              )}
-            </div>
-            <div className="flex gap-4">
-              <StatsItem icon={Package2} label={stats.sandboxes} />
-              <StatsItem icon={Heart} label={stats.likes} />
-            </div>
               {bio && <p className="text-sm text-center">{bio}</p>}
               {(socialLinks.length > 0 || personalWebsite) && (
                 <div className="flex gap-2 justify-center">
                   {personalWebsite && (
-                  <Button variant="ghost" size="smIcon" asChild>
+                    <Button variant="secondary" size="smIcon" asChild>
                       <a
                         href={personalWebsite}
                         target="_blank"
@@ -271,7 +260,12 @@ function ProfileCard({
                   {socialLinks.map((link, index) => {
                     const Icon = socialIcons[link.platform]
                     return (
-                    <Button key={index} variant="ghost" size="smIcon" asChild>
+                      <Button
+                        key={index}
+                        variant="secondary"
+                        size="smIcon"
+                        asChild
+                      >
                         <a
                           href={link.url}
                           target="_blank"
@@ -285,10 +279,25 @@ function ProfileCard({
                   })}
                 </div>
               )}
+            </div>
+            <div className="flex flex-col gap-1 items-center">
+              {typeof generations === "number" && (
+                <div className="flex justify-center">
+                  <SubscriptionBadge
+                    generations={generations}
+                    tier={tier as keyof typeof TIERS}
+                  />
+                </div>
+              )}
+              <div className="flex gap-4">
+                <StatsItem icon={Package2} label={stats.sandboxes} />
+                <StatsItem icon={Heart} label={stats.likes} />
+              </div>
+            </div>
             <p className="text-xs mt-2 text-muted-foreground text-center">
               {joinedAt}
             </p>
-          </div>
+          </>
         )}
       </CardContent>
     </Card>
@@ -713,7 +722,7 @@ const SubscriptionBadge = ({
       </Badge>
       <HoverCard>
         <HoverCardTrigger>
-          <Button variant="ghost" size="smIcon">
+          <Button variant="ghost" size="smIcon" className="size-[26px]">
             <Info size={16} />
           </Button>
         </HoverCardTrigger>

frontend/components/ui/button.tsx

@@ -26,7 +26,7 @@ const buttonVariants = cva(
         sm: "h-8 rounded-md px-3 text-xs",
         lg: "h-10 rounded-md px-8",
         icon: "h-9 w-9",
-        smIcon: "h-8 w-8",
+        smIcon: "size-8",
       },
     },
     defaultVariants: {