Update dependencies and fix introduced errors

components/Card/index.tsx

@@ -1,7 +1,6 @@
 import { FC } from 'react';
 import { StyledCard } from './styles';
 import Image from 'next/image';
-import Link from 'next/link';
 
 interface Props {
 	title: string;
@@ -15,26 +14,24 @@ interface Props {
 
 const Card: FC<Props> = ({ title, description, image, tags, href, target, onClick }) => {
 	return (
-		<Link href={href} passHref>
-			<StyledCard as='a' target={target} onClick={onClick} image={!!image}>
-				<div className='card-content'>
-					<h3>{title}</h3>
-					<p>{description}</p>
-					{tags && (
-						<div className='tags-wrapper'>
-							{tags.map((tag, index) => (
-								<span key={index}>#{tag}&nbsp;</span>
-							))}
-						</div>
-					)}
-				</div>
-				{image && (
-					<div className='card-image'>
-						<Image src={image} layout='fill' objectFit='cover' />
+		<StyledCard href={href} onClick={onClick} image={!!image} target={target}>
+			<div className='card-content'>
+				<h3>{title}</h3>
+				<p>{description}</p>
+				{tags && (
+					<div className='tags-wrapper'>
+						{tags.map((tag, index) => (
+							<span key={index}>#{tag}&nbsp;</span>
+						))}
 					</div>
 				)}
-			</StyledCard>
-		</Link>
+			</div>
+			{image && (
+				<div className='card-image'>
+					<Image alt={title} src={image} fill />
+				</div>
+			)}
+		</StyledCard>
 	);
 };
 

components/Card/styles.tsx

@@ -1,6 +1,7 @@
 import styled from 'styled-components';
+import Link from 'next/link';
 
-export const StyledCard = styled.div<{ image: boolean }>`
+export const StyledCard = styled(Link)<{ image: boolean }>`
 	cursor: pointer;
 	width: 100%;
 	display: grid;