src/components/GameCard.tsx

@@ -1,5 +1,7 @@
+import { useNavigate } from 'react-router-dom'
 import '../styles/cardGames.css'
 import { handleGameImageError } from '../utils'
+import { getGamePageRoute } from 'routes'
 
 type GameCardProps = {
   title: string
@@ -7,8 +9,13 @@ type GameCardProps = {
 }
 
 export const GameCard = ({ title, imageUrl }: GameCardProps) => {
+  const navigate = useNavigate()
+
   return (
-    <a className='cardGameMainWrapperLink' href='search.html'>
+    <div
+      className='cardGameMainWrapperLink'
+      onClick={() => navigate(getGamePageRoute(title))}
+    >
       <div className='cardGameMainWrapper'>
         <img
           src={imageUrl}
@@ -19,6 +26,6 @@ export const GameCard = ({ title, imageUrl }: GameCardProps) => {
       <div className='cardGameMainTitle'>
         <p>{title}</p>
       </div>
-    </a>
+    </div>
   )
 }