fixing links

Author: Alessandro100

src/app/[locale]/about/components/AboutPage.tsx

@@ -2,6 +2,7 @@ import { Container, Typography, Button } from '@mui/material';
 import OpenInNewIcon from '@mui/icons-material/OpenInNew';
 import { type ReactElement } from 'react';
 import { getTranslations } from 'next-intl/server';
+import Link from 'next/link';
 
 export default async function AboutPage(): Promise<ReactElement> {
   const t = await getTranslations('about');
@@ -72,15 +73,11 @@ export default async function AboutPage(): Promise<ReactElement> {
             <li>{t('benefits.mirrored')}</li>
             <li>{t('benefits.boundingBoxes')}</li>
             <li>
-              <Button
-                variant='text'
-                className='line-start inline'
-                href='/contribute'
-                rel='noreferrer'
-                target='_blank'
-              >
-                {t('benefits.addFeeds')}
-              </Button>
+              <Link href='/contribute' rel='noreferrer' target='_blank'>
+                <Button variant='text' className='line-start inline'>
+                  {t('benefits.addFeeds')}
+                </Button>
+              </Link>
             </li>
             <li>{t('benefits.openSource')}</li>
           </ul>

src/app/[locale]/components/HomePage.tsx

@@ -10,6 +10,7 @@ import OpenInNewIcon from '@mui/icons-material/OpenInNew';
 import SearchBox from './SearchBox';
 import { getTranslations } from 'next-intl/server';
 import '../../styles/TextShimmer.css';
+import Link from 'next/link';
 
 interface ActionBoxProps {
   IconComponent: React.ElementType;
@@ -35,9 +36,11 @@ const ActionBox = ({
     }}
   >
     <IconComponent sx={{ width: '100%', height: iconHeight }} />
-    <Button variant='contained' href={buttonHref} sx={{ m: 2, px: 2 }}>
-      {buttonText}
-    </Button>
+    <Link href={buttonHref}>
+      <Button variant='contained' sx={{ m: 2, px: 2 }}>
+        {buttonText}
+      </Button>
+    </Link>
   </Box>
 );
 

src/app/screens/FAQ.tsx

@@ -5,6 +5,7 @@ import Container from '@mui/material/Container';
 import { Button, Typography } from '@mui/material';
 import { ColoredContainer } from '../styles/PageLayout.style';
 import OpenInNewIcon from '@mui/icons-material/OpenInNew';
+import Link from 'next/link';
 
 export default function FAQ(): React.ReactElement {
   return (
@@ -54,6 +55,7 @@ export default function FAQ(): React.ReactElement {
             variant='text'
             className='line-start inline'
             href={'/contribute'}
+            component={Link}
           >
             add a feed
           </Button>
@@ -72,6 +74,7 @@ export default function FAQ(): React.ReactElement {
             variant='text'
             className='line-start inline'
             href={'/sign-up'}
+            component={Link}
           >
             create an account.
           </Button>