update provider summary

src/components/CTASection.tsx

@@ -1,24 +0,0 @@
-import React from "react";
-import UserSearchDialog from "./UserSearchDialog";
-
-const CTASection: React.FC = () => {
-  return (
-    <div className="mt-24 mb-16 flex justify-center">
-      <div className="bg-gradient-to-br from-card to-card/95 rounded-2xl border border-border shadow-lg hover:shadow-xl transition-all duration-300 p-8 max-w-2xl w-full text-center space-y-6">
-        <div className="space-y-4">
-          <h2 className="text-2xl lg:text-3xl font-bold text-foreground">
-            Want Your Own Heatmap?
-          </h2>
-          <p className="text-muted-foreground text-lg">
-            Search for any Hugging Face organization or user to see their model release activity.
-          </p>
-        </div>
-        <div className="flex justify-center">
-          <UserSearchDialog />
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default CTASection;

src/components/Navbar.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+import UserSearchDialog from "./UserSearchDialog";
+
+const Navbar: React.FC = () => {
+  return (
+    <nav className="w-full mt-4">
+      <div className="max-w-6xl mx-auto px-4 py-3">
+        <div className="flex items-center justify-end">
+          <UserSearchDialog />
+        </div>
+      </div>
+    </nav>
+  );
+};
+
+export default Navbar;

src/components/ProviderSummary.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import { ProviderInfo, CalendarData } from "../types/heatmap";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./ui/tooltip";
 
 interface ProviderSummaryProps {
   provider: ProviderInfo;
@@ -38,45 +39,49 @@ const ProviderSummary: React.FC<ProviderSummaryProps> = ({
   };
 
   return (
-    <div 
-      className="flex flex-col items-center min-w-0 flex-shrink-0 cursor-pointer group px-1"
-      onClick={handleClick}
-    >
-      {/* 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>
+    <TooltipProvider>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <div 
+            className="flex flex-col items-center min-w-0 flex-shrink-0 cursor-pointer group px-1"
+            onClick={handleClick}
+          >
+            {/* 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} 
-            alt={`${providerName} logo`}
-            className="w-16 h-16 rounded-full shadow-lg border-2 border-border/50 hover:border-blue-500/50 transition-all duration-200"
-          />
-        ) : (
-          <div className="w-16 h-16 rounded-full bg-muted flex items-center justify-center text-xl font-bold text-muted-foreground hover:bg-muted/80 transition-all duration-200">
-            {providerName.charAt(0).toUpperCase()}
-          </div>
-        )}
-      </div>
+              {provider.avatarUrl ? (
+                <img 
+                  src={provider.avatarUrl} 
+                  alt={`${providerName} logo`}
+                  className="w-16 h-16 rounded-lg shadow-lg transition-all duration-200 bg-white dark:bg-gray-900"
+                />
+              ) : (
+                <div className="w-16 h-16 rounded-lg bg-muted flex items-center justify-center text-xl font-bold text-muted-foreground hover:bg-muted/80 transition-all duration-200">
+                  {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 */}
-        <div className="text-[10px] text-muted-foreground">
-          {totalCount} in the last year
-        </div>
-        
- 
-      </div>
-    </div>
+            {/* Activity Info */}
+            <div className="mt-1.5 text-center">
+              {/* Provider Name */}
+              <div className="text-xs font-medium text-foreground truncate max-w-20 text-center">
+                {providerName}
+              </div>
+            </div>
+          </div>
+        </TooltipTrigger>
+        <TooltipContent side="bottom" className="bg-background border border-border shadow-lg">
+          <p className="text-sm font-medium">
+            {totalCount} new repos in the last year
+          </p>
+        </TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
   );
 };
 

src/components/UserSearchDialog.tsx

@@ -99,7 +99,9 @@ const UserSearchDialog = () => {
   return (
     <Dialog open={isOpen} onOpenChange={handleDialogOpenChange}>
       <DialogTrigger asChild>
-        <Button variant="outline">Search</Button>
+        <button className="text-sm text-foreground hover:text-blue-500 transition-colors duration-200">
+          Search
+        </button>
       </DialogTrigger>
       <DialogContent className="w-full max-w-[95vw] sm:max-w-4xl p-4 sm:p-6 max-h-[90vh] flex flex-col">
         <DialogHeader>

src/constants/organizations.ts

@@ -6,7 +6,7 @@ export const ORGANIZATIONS: ProviderInfo[] = [
   { color: "#10A37F", authors: ["openai"] },
   { color: "#cc785c", authors: ["Anthropic"] },
   { color: "#DB4437", authors: ["google"] },
-  { color: "#5E35B1", authors: ["allenai"] },
+  { color: "#F45098", authors: ["allenai"] },
   { color: "#0088cc", authors: ["apple"] },
   { color: "#FEB800", authors: ["microsoft"] },
   { color: "#76B900", authors: ["nvidia"] },

src/pages/index.tsx

@@ -2,7 +2,7 @@ import React, { useState, useEffect } from "react";
 import { ProviderInfo, ModelData, CalendarData } from "../types/heatmap";
 import ProviderSummary from "../components/ProviderSummary";
 import HeatmapGrid from "../components/HeatmapGrid";
-import CTASection from "../components/CTASection";
+import Navbar from "../components/Navbar";
 import { getProviders } from "../utils/ranking";
 import { ORGANIZATIONS } from "../constants/organizations";
 
@@ -25,38 +25,47 @@ function Page({
 
 
   return (
-    <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>
-      <div className="text-center text-sm my-8 space-y-4">
-        <p className="text-muted-foreground">
-          Open models, datasets, and apps from the top AI labs in the last year.
-        </p>
-      </div>
-
-      <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 justify-center">
-            {providers.map((provider, index) => (
-              <ProviderSummary
-                key={provider.fullName || provider.authors[0]}
-                provider={provider}
-                calendarData={calendarData}
-                rank={index + 1}
+    <div className="w-full">
+      <Navbar />
+      
+      <div className="w-full p-4 py-16">
+        <div className="text-center mb-16 max-w-4xl mx-auto">
+          <h1 className="text-2xl sm:text-3xl md:text-4xl lg:text-6xl font-bold text-foreground mb-6 bg-gradient-to-r from-foreground to-foreground/80 bg-clip-text">
+            <span className="inline-flex items-center gap-1 sm:gap-2">
+              Hugging Face Heatmap
+              <img
+                src="/hf-icon.svg"
+                alt="Hugging Face icon"
+                className="size-6 sm:size-8 md:size-10"
               />
-            ))}
+            </span>
+          </h1>
+          <p className="text-base sm:text-lg lg:text-xl text-muted-foreground max-w-2xl mx-auto leading-relaxed px-4">
+            Open models, datasets, and apps from popular AI labs in the last year.
+          </p>
+        </div>
+
+        <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 justify-center">
+              {providers.map((provider, index) => (
+                <ProviderSummary
+                  key={provider.fullName || provider.authors[0]}
+                  provider={provider}
+                  calendarData={calendarData}
+                  rank={index + 1}
+                />
+              ))}
+            </div>
           </div>
         </div>
+             
+        <HeatmapGrid 
+          sortedProviders={providers}
+          calendarData={calendarData}
+          isLoading={isLoading}
+        />
       </div>
-           
-      <HeatmapGrid 
-        sortedProviders={providers}
-        calendarData={calendarData}
-        isLoading={isLoading}
-      />
-      
-      <CTASection />
     </div>
   );
 }

src/utils/authors.ts

@@ -1,77 +1,82 @@
 import { ProviderInfo, ModelData } from "../types/heatmap";
 
+interface AuthorData {
+  author: string;
+  fullName: string;
+  avatarUrl: string | null;
+  isVerified: boolean;
+  isEnterprise: boolean;
+  numModels: number;
+  numSpaces: number;
+  numDatasets: number;
+  numFollowers: number;
+  numUsers: number;
+}
+
+const createDefaultAuthorData = (author: string): AuthorData => ({
+  author,
+  fullName: author,
+  avatarUrl: null,
+  isVerified: false,
+  isEnterprise: false,
+  numModels: 0,
+  numSpaces: 0,
+  numDatasets: 0,
+  numFollowers: 0,
+  numUsers: 0,
+});
+
+const transformApiData = (author: string, data: any, isOrganization: boolean): AuthorData => ({
+  author,
+  fullName: data.fullname || author,
+  avatarUrl: data.avatarUrl || null,
+  isVerified: data.isVerified || false,
+  isEnterprise: isOrganization ? (data.isEnterprise || false) : false,
+  numModels: data.numModels || 0,
+  numSpaces: data.numSpaces || 0,
+  numDatasets: data.numDatasets || 0,
+  numFollowers: data.numFollowers || 0,
+  numUsers: isOrganization ? (data.numUsers || 0) : 0,
+});
+
+async function fetchSingleAuthorData(author: string): Promise<AuthorData> {
+  try {
+    // Try organizations API first
+    const orgResponse = await fetch(`https://huggingface.co/api/organizations/${author}/overview`);
+    if (orgResponse.ok) {
+      const data = await orgResponse.json();
+      return transformApiData(author, data, true);
+    }
+    
+    // Fallback to users API
+    const userResponse = await fetch(`https://huggingface.co/api/users/${author}/overview`);
+    if (userResponse.ok) {
+      const data = await userResponse.json();
+      return transformApiData(author, data, false);
+    }
+    
+    throw new Error('Neither organization nor user API returned valid data');
+  } catch (error) {
+    console.error(`Error fetching data for ${author}:`, error);
+    return createDefaultAuthorData(author);
+  }
+}
+
 export async function fetchOrganizationData(authors: string[]) {
   try {
-    // Fetch data for all authors
     const authorsData = await Promise.all(
-      authors.map(async (author) => {
-        try {
-          // Try organizations API first
-          const orgResponse = await fetch(`https://huggingface.co/api/organizations/${author}/overview`);
-          if (orgResponse.ok) {
-            const data = await orgResponse.json();
-            return {
-              author,
-              fullName: data.fullname || author,
-              avatarUrl: data.avatarUrl || null,
-              isVerified: data.isVerified || false,
-              isEnterprise: data.isEnterprise || false,
-              numModels: data.numModels || 0,
-              numSpaces: data.numSpaces || 0,
-              numDatasets: data.numDatasets || 0,
-              numFollowers: data.numFollowers || 0,
-              numUsers: data.numUsers || 0,
-            };
-          }
-          
-          // Fallback to users API if organization doesn't exist
-          const userResponse = await fetch(`https://huggingface.co/api/users/${author}/overview`);
-          if (userResponse.ok) {
-            const data = await userResponse.json();
-            return {
-              author,
-              fullName: data.fullname || author,
-              avatarUrl: data.avatarUrl || null,
-              isVerified: false,
-              isEnterprise: false,
-              numModels: data.numModels || 0,
-              numSpaces: data.numSpaces || 0,
-              numDatasets: data.numDatasets || 0,
-              numFollowers: data.numFollowers || 0,
-              numUsers: 0,
-            };
-          }
-          
-          throw new Error('Neither organization nor user API returned valid data');
-        } catch (error) {
-          console.error(`Error fetching data for ${author}:`, error);
-          return {
-            author,
-            fullName: author,
-            avatarUrl: null,
-            isVerified: false,
-            isEnterprise: false,
-            numModels: 0,
-            numSpaces: 0,
-            numDatasets: 0,
-            numFollowers: 0,
-            numUsers: 0,
-          };
-        }
-      })
+      authors.map(author => fetchSingleAuthorData(author))
     );
 
-    // Use the primary author for main display name and avatar
     const primaryAuthor = authorsData[0];
     
-    // Aggregate stats from all authors
     const aggregatedStats = authorsData.reduce(
       (acc, authorData) => ({
-        numModels: acc.numModels + (authorData.numModels || 0),
-        numSpaces: acc.numSpaces + (authorData.numSpaces || 0),
-        numDatasets: acc.numDatasets + (authorData.numDatasets || 0),
-        numFollowers: acc.numFollowers + (authorData.numFollowers || 0),
-        numUsers: acc.numUsers + (authorData.numUsers || 0),
+        numModels: acc.numModels + authorData.numModels,
+        numSpaces: acc.numSpaces + authorData.numSpaces,
+        numDatasets: acc.numDatasets + authorData.numDatasets,
+        numFollowers: acc.numFollowers + authorData.numFollowers,
+        numUsers: acc.numUsers + authorData.numUsers,
       }),
       { numModels: 0, numSpaces: 0, numDatasets: 0, numFollowers: 0, numUsers: 0 }
     );
@@ -87,23 +92,14 @@ export async function fetchOrganizationData(authors: string[]) {
   } catch (error) {
     console.error(`Error fetching organization data for authors:`, error);
     const primaryAuthor = authors[0];
+    const defaultAuthorData = createDefaultAuthorData(primaryAuthor);
+    
     return {
       fullName: primaryAuthor,
       avatarUrl: null,
       isVerified: false,
       isEnterprise: false,
-      authorsData: [{ 
-        author: primaryAuthor,
-        fullName: primaryAuthor,
-        avatarUrl: null,
-        isVerified: false,
-        isEnterprise: false,
-        numModels: 0,
-        numSpaces: 0,
-        numDatasets: 0,
-        numFollowers: 0,
-        numUsers: 0,
-      }],
+      authorsData: [defaultAuthorData],
       numModels: 0,
       numSpaces: 0,
       numDatasets: 0,
@@ -114,34 +110,40 @@ export async function fetchOrganizationData(authors: string[]) {
 }
 
 export async function fetchAllProvidersData(providers: ProviderInfo[]): Promise<ProviderInfo[]> {
-  return Promise.all(providers.map(async (providerInfo) => {
-    const orgData = await fetchOrganizationData(providerInfo.authors);
-    return { 
-      ...providerInfo, 
-      ...orgData
-    };
+  return Promise.all(
+    providers.map(async (providerInfo) => {
+      const orgData = await fetchOrganizationData(providerInfo.authors);
+      return { 
+        ...providerInfo, 
+        ...orgData
+      };
+    })
+  );
+}
+
+async function fetchAuthorEntityData(author: string, entityType: string): Promise<ModelData[]> {
+  const response = await fetch(
+    `https://huggingface.co/api/${entityType}?author=${author}&sort=createdAt&direction=-1`
+  );
+  
+  if (!response.ok) {
+    throw new Error(`HTTP error! status: ${response.status}`);
+  }
+  
+  const data = await response.json();
+  return data.map((item: any): ModelData => ({
+    createdAt: item.createdAt,
+    id: item.id,
   }));
 }
 
 export async function fetchAuthorData(author: string): Promise<ModelData[]> {
   const entityTypes = ["models", "datasets", "spaces"] as const;
+  
   try {
     const allData = await Promise.all(
-      entityTypes.map(async (type) => {
-        const response = await fetch(
-          `https://huggingface.co/api/${type}?author=${author}&sort=createdAt&direction=-1`
-        );
-        if (!response.ok) {
-          throw new Error(`HTTP error! status: ${response.status}`);
-        }
-        const data = await response.json();
-        return data.map((item: any): ModelData => ({
-          createdAt: item.createdAt,
-          id: item.id,
-        }));
-      })
+      entityTypes.map(type => fetchAuthorEntityData(author, type))
     );
-
     return allData.flat();
   } catch (error) {
     console.error(`Error fetching data for author ${author}:`, error);
@@ -152,7 +154,7 @@ export async function fetchAuthorData(author: string): Promise<ModelData[]> {
 export async function fetchAllAuthorsData(authors: string[]): Promise<ModelData[]> {
   try {
     const allData = await Promise.all(
-      authors.map(async (author) => await fetchAuthorData(author))
+      authors.map(author => fetchAuthorData(author))
     );
     return allData.flat();
   } catch (error) {