chore: fix linting errors and ts bugs.

src/components/Card/index.tsx

@@ -18,7 +18,10 @@ export const Card: React.FC<{
   showCategories?: boolean
   title?: string
 }> = (props) => {
-  const { card, link } = useClickableCard({})
+  const {
+    card: { ref: cardRef },
+    link: { ref: linkRef },
+  } = useClickableCard({})
   const { className, doc, relationTo, showCategories, title: titleFromProps } = props
 
   const { slug, categories, meta, title } = doc || {}
@@ -35,7 +38,7 @@ export const Card: React.FC<{
         'border border-border rounded-lg overflow-hidden bg-card hover:cursor-pointer',
         className,
       )}
-      ref={card.ref}
+      ref={cardRef}
     >
       <div className="relative w-full ">
         {!metaImage && <div className="">No image</div>}
@@ -67,7 +70,7 @@ export const Card: React.FC<{
         {titleToUse && (
           <div className="prose">
             <h3>
-              <Link className="not-prose" href={href} ref={link.ref}>
+              <Link className="not-prose" href={href} ref={linkRef}>
                 {titleToUse}
               </Link>
             </h3>

src/components/Logo/Logo.tsx

@@ -1,5 +1,6 @@
 import clsx from 'clsx'
 import React from 'react'
+import Image from '@/spa/components/ui/UnoptimizedImage'
 
 interface Props {
   className?: string
@@ -14,8 +15,7 @@ export const Logo = (props: Props) => {
   const priority = priorityFromProps || 'low'
 
   return (
-    /* eslint-disable @next/next/no-img-element */
-    <img
+    <Image unoptimized
       alt="Payload Logo"
       width={193}
       height={34}