seed data

apps/website/components/leaderboards/TeamLeaderboardPreview.tsx

@@ -92,9 +92,17 @@ export default function TeamLeaderboardPreview({ teams, onTeamClick }: TeamLeade
                 <p className="text-white font-medium truncate group-hover:text-purple-400 transition-colors">
                   {team.name}
                 </p>
-                <div className="flex items-center gap-2 text-xs text-gray-500">
-                  <Users className="w-3 h-3" />
-                  {team.memberCount} members
+                <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} members
+                  </span>
                   <span className={levelConfig?.color}>{levelConfig?.label}</span>
                 </div>
               </div>

apps/website/components/leagues/LeagueCard.tsx

@@ -51,6 +51,48 @@ function getChampionshipLabel(type?: string) {
   }
 }
 
+function getCategoryLabel(category?: string): string {
+  if (!category) return '';
+  
+  switch (category) {
+    case 'driver':
+      return 'Driver';
+    case 'team':
+      return 'Team';
+    case 'nations':
+      return 'Nations';
+    case 'trophy':
+      return 'Trophy';
+    case 'endurance':
+      return 'Endurance';
+    case 'sprint':
+      return 'Sprint';
+    default:
+      return category.charAt(0).toUpperCase() + category.slice(1);
+  }
+}
+
+function getCategoryColor(category?: string): string {
+  if (!category) return 'bg-gray-500/20 text-gray-400 border-gray-500/30';
+  
+  switch (category) {
+    case 'driver':
+      return 'bg-purple-500/20 text-purple-400 border-purple-500/30';
+    case 'team':
+      return 'bg-blue-500/20 text-blue-400 border-blue-500/30';
+    case 'nations':
+      return 'bg-green-500/20 text-green-400 border-green-500/30';
+    case 'trophy':
+      return 'bg-yellow-500/20 text-yellow-400 border-yellow-500/30';
+    case 'endurance':
+      return 'bg-orange-500/20 text-orange-400 border-orange-500/30';
+    case 'sprint':
+      return 'bg-red-500/20 text-red-400 border-red-500/30';
+    default:
+      return 'bg-gray-500/20 text-gray-400 border-gray-500/30';
+  }
+}
+
 function getGameColor(gameId?: string): string {
   switch (gameId) {
     case 'iracing':
@@ -81,6 +123,8 @@ export default function LeagueCard({ league, onClick }: LeagueCardProps) {
   const gameColorClass = getGameColor(league.scoring?.gameId);
   const isNew = isNewLeague(league.createdAt);
   const isTeamLeague = league.maxTeams && league.maxTeams > 0;
+  const categoryLabel = getCategoryLabel(league.category);
+  const categoryColorClass = getCategoryColor(league.category);
   
   // Calculate fill percentage - use teams for team leagues, drivers otherwise
   const usedSlots = isTeamLeague ? (league.usedTeamSlots ?? 0) : (league.usedDriverSlots ?? 0);
@@ -128,6 +172,11 @@ export default function LeagueCard({ league, onClick }: LeagueCardProps) {
                 {league.scoring.gameName}
               </span>
             )}
+            {league.category && (
+              <span className={`px-2 py-0.5 rounded-full text-[10px] font-semibold border ${categoryColorClass}`}>
+                {categoryLabel}
+              </span>
+            )}
           </div>
 
           {/* Championship Type Badge - Top Right */}

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>
   );
-}
+}