src/components/ModCard.tsx

@@ -4,6 +4,7 @@ type ModCardProps = {
   title: string
   summary: string
   backgroundLink: string
+  link: string
   handleClick: () => void
 }
 
@@ -11,10 +12,18 @@ export const ModCard = ({
   title,
   summary,
   backgroundLink,
+  link,
   handleClick
 }: ModCardProps) => {
   return (
-    <a className='cardModMainWrapperLink' onClick={handleClick}>
+    <a
+      className='cardModMainWrapperLink'
+      href={link}
+      onClick={(e) => {
+        e.preventDefault()
+        handleClick()
+      }}
+    >
       <div className='cardModMain'>
         <div
           className='cMMPicture'

src/pages/mods.tsx

@@ -177,25 +177,26 @@ export const ModsPage = () => {
 
             <div className='IBMSecMain IBMSMListWrapper'>
               <div className='IBMSMList'>
-                {filteredModList.map((mod) => (
-                  <ModCard
-                    key={mod.id}
-                    title={mod.title}
-                    summary={mod.summary}
-                    backgroundLink={mod.featuredImageUrl}
-                    handleClick={() =>
-                      navigate(
-                        getModsInnerPageRoute(
+                {filteredModList.map((mod) => {
+                  const route = getModsInnerPageRoute(
                     nip19.naddrEncode({
                       identifier: mod.aTag,
                       pubkey: mod.author,
                       kind: kinds.ClassifiedListing
                     })
                   )
-                      )
-                    }
+
+                  return (
+                    <ModCard
+                      key={mod.id}
+                      title={mod.title}
+                      summary={mod.summary}
+                      backgroundLink={mod.featuredImageUrl}
+                      link={`#${route}`}
+                      handleClick={() => navigate(route)}
                     />
-                ))}
+                  )
+                })}
               </div>
             </div>