hover animation

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 group"
+      className="bg-gray-50 border border-gray-200 px-6 py-4 rounded-xl transition-all duration-300 hover:-translate-y-1.5 hover:border-amber-400 hover:shadow-xl hover:shadow-black/5 group"
     >
       <header className="flex items-center justify-between gap-5">
         <div>
@@ -59,7 +59,7 @@ export const Space: React.FC<Props> = ({ space }) => {
           </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 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>
+            <p className="text-xs font-regular">{space.likes}</p>
           </div>
         </div>
       </header>