hover animate

components/spaces/space.tsx

@@ -12,7 +12,7 @@ export const Space: React.FC<Props> = ({ space }) => {
     <Link
       href={`https://huggingface.co/spaces/${space.id}`}
       target="_blank"
-      className="bg-gray-50 border border-gray-200 px-6 py-4 rounded-xl transition-all duration-300 hover:ring-[4px] ring-opacity-10 ring-blue-500"
+      className="bg-gray-50 border border-gray-200 px-6 py-4 rounded-xl transition-all duration-300 hover:ring-[4px] ring-opacity-10 ring-blue-500 group"
     >
       <header className="flex items-center justify-between gap-5">
         <div>
@@ -57,7 +57,7 @@ export const Space: React.FC<Props> = ({ space }) => {
               </p>
             )}
           </div>
-          <div className="flex items-center max-w-max rounded-full px-1.5 py-1 text-sm bg-gray-100/80 border border-gray-200 text-gray-600">
+          <div className="flex items-center max-w-max rounded-full px-1.5 py-1 text-sm bg-gray-100/80 border border-gray-200 text-gray-600 transition-all duration-300 group-hover:bg-amber-50 group-hover:border-amber-200 group-hover:text-amber-500">
             <TiHeartFullOutline className="w-5" />
             <p className="text-gray-500 text-xs font-regular">{space.likes}</p>
           </div>