refresh summary cards

src/components/ProviderSummary.tsx

@@ -14,7 +14,8 @@ const ProviderSummary: React.FC<ProviderSummaryProps> = ({
 }) => {
   const providerName = provider.fullName || provider.authors[0];
   const calendarKey = provider.authors[0];
-  const totalCount = calendarData[calendarKey]?.reduce((sum, day) => sum + day.count, 0) || 0;
+  const providerData = calendarData[calendarKey] || [];
+  const totalCount = providerData.reduce((sum, day) => sum + day.count, 0);
 
   const handleClick = () => {
     const element = document.getElementById(`provider-${calendarKey}`);
@@ -23,13 +24,31 @@ const ProviderSummary: React.FC<ProviderSummaryProps> = ({
     }
   };
 
+  const getRankBadgeClasses = () => {
+    if (rank === 1) {
+      return "bg-gradient-to-br from-yellow-400 to-yellow-600 text-yellow-900";
+    }
+    if (rank === 2) {
+      return "bg-gradient-to-br from-gray-300 to-gray-500 text-gray-900";
+    }
+    if (rank === 3) {
+      return "bg-gradient-to-br from-amber-600 to-amber-800 text-amber-100";
+    }
+    return "bg-gradient-to-br from-blue-500 to-blue-700 text-white";
+  };
+
   return (
     <div 
-      className="flex flex-col items-center min-w-0 flex-shrink-0 cursor-pointer"
+      className="flex flex-col items-center min-w-0 flex-shrink-0 cursor-pointer group px-1"
       onClick={handleClick}
     >
-      {/* Logo Circle with Release Count Badge */}
+      {/* Logo Circle */}
       <div className="relative">
+        {/* Rank Badge */}
+        <div className={`absolute -top-2 -left-2 ${getRankBadgeClasses()} text-xs font-bold rounded-full min-w-[24px] h-6 flex items-center justify-center px-1.5 shadow-lg border-2 border-background z-10`}>
+          #{rank}
+        </div>
+
         {provider.avatarUrl ? (
           <img 
             src={provider.avatarUrl} 
@@ -41,11 +60,21 @@ const ProviderSummary: React.FC<ProviderSummaryProps> = ({
             {providerName.charAt(0).toUpperCase()}
           </div>
         )}
+      </div>
+
+      {/* Activity Info */}
+      <div className="mt-1.5 text-center space-y-0.5">
+                {/* Provider Name */}
+        <div className="text-xs font-medium text-foreground truncate max-w-20 text-center">
+          {providerName}
+        </div>
         
-        {/* Release Count Badge */}
-        <div className="absolute -top-2 -right-2 bg-gradient-to-br from-gray-600 to-gray-700 text-white text-xs font-bold rounded-full min-w-[24px] h-6 flex items-center justify-center px-1.5 shadow-lg border-2 border-background">
-          {totalCount > 999 ? `${Math.floor(totalCount / 1000)}k` : totalCount}
+        {/* Release Count */}
+        <div className="text-[10px] text-muted-foreground">
+          {totalCount} releases
         </div>
+        
+ 
       </div>
     </div>
   );

src/pages/index.tsx

@@ -123,7 +123,7 @@ const OpenSourceHeatmap: React.FC<OpenSourceHeatmapProps> = ({
   );
 
   return (
-    <div className="w-full max-w-screen-xl mx-auto p-4 py-16 relative">
+    <div className="w-full p-4 py-16 relative">
       <h1 className="text-3xl lg:text-5xl mt-16 font-bold text-center mb-2 text-foreground">
         Hugging Face Heatmap 🤗
       </h1>
@@ -134,9 +134,9 @@ const OpenSourceHeatmap: React.FC<OpenSourceHeatmapProps> = ({
       </div>
 
       {/* Provider Summary List */}
-      <div className="w-full mb-16">
+      <div className="mb-16 mx-auto">
         <div className="overflow-x-auto scrollbar-hide">
-          <div className="flex gap-6 px-4 py-2 min-w-max">
+          <div className="flex gap-6 px-4 py-2 min-w-max justify-center">
             {sortedProviders.map((provider, index) => (
               <ProviderSummary
                 key={provider.fullName || provider.authors[0]}