seed data

apps/website/components/teams/FeaturedRecruiting.tsx

@@ -91,7 +91,13 @@ export default function FeaturedRecruiting({ teams, onTeamClick }: FeaturedRecru
               </h3>
               <p className="text-xs text-gray-500 line-clamp-2 mb-3">{team.description}</p>
 
-              <div className="flex items-center gap-3 text-xs text-gray-400">
+              <div className="flex items-center gap-2 text-xs text-gray-400 flex-wrap">
+                {team.category && (
+                  <span className="flex items-center gap-1 text-purple-400">
+                    <span className="w-1.5 h-1.5 rounded-full bg-purple-400"></span>
+                    {team.category}
+                  </span>
+                )}
                 <span className="flex items-center gap-1">
                   <Users className="w-3 h-3" />
                   {team.memberCount}

apps/website/components/teams/SkillLevelSection.tsx

@@ -88,8 +88,9 @@ export default function SkillLevelSection({
             id={team.id}
             name={team.name}
             description={team.description ?? ''}
+            logo={team.logoUrl}
             memberCount={team.memberCount}
-            rating={null}
+            rating={team.rating}
             totalWins={team.totalWins}
             totalRaces={team.totalRaces}
             performanceLevel={team.performanceLevel as SkillLevel}
@@ -97,10 +98,11 @@ export default function SkillLevelSection({
             specialization={specialization(team.specialization)}
             region={team.region ?? ''}
             languages={team.languages}
+            category={team.category}
             onClick={() => onTeamClick(team.id)}
           />
         ))}
       </div>
     </div>
   );
-}
+}

apps/website/components/teams/TeamCard.tsx

@@ -34,6 +34,7 @@ interface TeamCardProps {
   region?: string;
   languages?: string[] | undefined;
   leagues?: string[];
+  category?: string;
   onClick?: () => void;
 }
 
@@ -77,6 +78,7 @@ export default function TeamCard({
   specialization,
   region,
   languages,
+  category,
   onClick,
 }: TeamCardProps) {
   const { mediaService } = useServices();
@@ -119,21 +121,27 @@ export default function TeamCard({
                 )}
               </div>
               
-              {/* Performance Level */}
-              {performanceBadge && (
-                <div className="mt-1.5 flex items-center gap-2">
+              {/* Performance Level & Category */}
+              <div className="mt-1.5 flex items-center gap-2 flex-wrap">
+                {performanceBadge && (
                   <span className={`flex items-center gap-1 px-2 py-0.5 rounded-full text-[10px] font-medium border ${performanceBadge.bgColor}`}>
                     <performanceBadge.icon className={`w-3 h-3 ${performanceBadge.color}`} />
                     <span className={performanceBadge.color}>{performanceBadge.label}</span>
                   </span>
-                  {specializationBadge && (
-                    <span className="flex items-center gap-1 text-[10px] text-gray-500">
-                      <specializationBadge.icon className={`w-3 h-3 ${specializationBadge.color}`} />
-                      {specializationBadge.label}
-                    </span>
-                  )}
-                </div>
-              )}
+                )}
+                {specializationBadge && (
+                  <span className="flex items-center gap-1 text-[10px] text-gray-500">
+                    <specializationBadge.icon className={`w-3 h-3 ${specializationBadge.color}`} />
+                    {specializationBadge.label}
+                  </span>
+                )}
+                {category && (
+                  <span className="flex items-center gap-1 px-2 py-0.5 rounded-full text-[10px] font-medium bg-purple-500/20 border border-purple-500/30 text-purple-400">
+                    <span className="w-2 h-2 rounded-full bg-purple-400"></span>
+                    {category}
+                  </span>
+                )}
+              </div>
             </div>
           </div>
         </div>

apps/website/components/teams/TeamLeaderboardPreview.tsx

@@ -140,7 +140,13 @@ export default function TeamLeaderboardPreview({
                   <p className="text-white font-medium truncate group-hover:text-purple-400 transition-colors">
                     {team.name}
                   </p>
-                  <div className="flex items-center gap-3 text-xs text-gray-500">
+                  <div className="flex items-center gap-2 text-xs text-gray-500 flex-wrap">
+                    {team.category && (
+                      <span className="flex items-center gap-1 text-purple-400">
+                        <span className="w-1.5 h-1.5 rounded-full bg-purple-400"></span>
+                        {team.category}
+                      </span>
+                    )}
                     <span className="flex items-center gap-1">
                       <Users className="w-3 h-3" />
                       {team.memberCount}
@@ -161,7 +167,7 @@ export default function TeamLeaderboardPreview({
                 {/* Rating */}
                 <div className="text-right">
                   <p className="text-purple-400 font-mono font-semibold">
-                    {'—'}
+                    {typeof team.rating === 'number' ? Math.round(team.rating).toLocaleString() : '—'}
                   </p>
                   <p className="text-xs text-gray-500">Rating</p>
                 </div>
@@ -172,4 +178,4 @@ export default function TeamLeaderboardPreview({
       </div>
     </div>
   );
-}
+}

apps/website/components/teams/TopThreePodium.tsx

@@ -140,6 +140,13 @@ export default function TopThreePodium({ teams, onClick }: TopThreePodiumProps)
                   {team.name}
                 </p>
 
+                {/* Category */}
+                {team.category && (
+                  <p className="text-xs text-purple-400 text-center mt-1">
+                    {team.category}
+                  </p>
+                )}
+
                 {/* Rating */}
                 <p className={`text-lg md:text-xl font-mono font-bold ${getPositionColor(position)} text-center`}>
                   {'—'}
@@ -172,4 +179,4 @@ export default function TopThreePodium({ teams, onClick }: TopThreePodiumProps)
       </div>
     </div>
   );
-}
+}