Better hero for non-color libraries

Author: tannerlinsley

src/components/LibraryHero.tsx

@@ -16,7 +16,12 @@ type LibraryHeroProps = {
 
 export function LibraryHero({ project, cta, actions }: LibraryHeroProps) {
   const resolvedName = project.name.replace('TanStack ', '')
-  const gradientText = `pr-1 inline-block text-transparent bg-clip-text bg-linear-to-r ${project.colorFrom} ${project.colorTo}`
+  const hasColor =
+    project.colorFrom && !project.colorFrom.includes('from-black')
+  // For colorless libraries, use a gray-to-black gradient to create contrast with the black TanStack text
+  const gradientText = hasColor
+    ? `pr-1 inline-block text-transparent bg-clip-text bg-linear-to-r ${project.colorFrom} ${project.colorTo}`
+    : 'pr-1 inline-block text-transparent bg-clip-text bg-linear-to-r from-gray-400 to-black dark:from-gray-500 dark:to-white'
 
   return (
     <div className="flex flex-col items-center gap-8 text-center px-4">