Use Gatsby Link

Signed-off-by: Kowalski Dragon (kowalski7cc) <kowalski7cc@users.noreply.github.com>

Author: kowalski7cc

src/components/header.jsx

@@ -4,6 +4,7 @@ import Container from "react-bootstrap/Container";
 import Nav from "react-bootstrap/Nav";
 import Navbar from "react-bootstrap/Navbar";
 import Logo from "../assets/foot.svg";
+import { Link } from "gatsby";
 
 const Header = () => {
   const data = useStaticQuery(graphql`
@@ -48,7 +49,11 @@ const Header = () => {
         }}
       >
         <Container>
-          <Navbar.Brand className='brand d-flex align-items-center' href='/'>
+          <Navbar.Brand
+            as={Link}
+            className='brand d-flex align-items-center'
+            href='/'
+          >
             <img
               src={Logo}
               style={{ fontSize: "1.5em" }}
@@ -65,16 +70,26 @@ const Header = () => {
             className='justify-content-end'
           >
             <Nav>
-              <Nav.Link href='/#explore'>Evento</Nav.Link>
+              <Nav.Link as={Link} href='/#explore'>
+                Evento
+              </Nav.Link>
               {switches.cfp && (
-                <Nav.Link href='/#schedule'>Call for papers</Nav.Link>
+                <Nav.Link as={Link} href='/#schedule'>
+                  Call for papers
+                </Nav.Link>
               )}
-              <Nav.Link href={`/schedule/${params}#calendar`}>
+              <Nav.Link as={Link} href={`/schedule/${params}#calendar`}>
                 {switches.schedule ? "Programma" : "Programma precedente"}
               </Nav.Link>
-              <Nav.Link href='/codeofconduct'>Code of Conduct</Nav.Link>
-              <Nav.Link href='/#sponsors'>Patrocini</Nav.Link>
-              <Nav.Link href='/#contattaci'>Contatti</Nav.Link>
+              <Nav.Link as={Link} href='/codeofconduct'>
+                Code of Conduct
+              </Nav.Link>
+              <Nav.Link as={Link} href='/#sponsors'>
+                Patrocini
+              </Nav.Link>
+              <Nav.Link as={Link} href='/#contattaci'>
+                Contatti
+              </Nav.Link>
             </Nav>
           </Navbar.Collapse>
         </Container>

src/components/hero.jsx

@@ -6,6 +6,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { icon } from "@fortawesome/fontawesome-svg-core/import.macro";
 import Alert from "react-bootstrap/Alert";
 import { StaticImage } from "gatsby-plugin-image";
+import { Link } from "gatsby";
 
 const Hero = ({ small }) => {
   const data = useStaticQuery(graphql`
@@ -153,13 +154,15 @@ const Hero = ({ small }) => {
             <div className='mt-5 gx-5 d-flex flex-wrap justify-content-start clearfix'>
               <Button
                 href='/#explore'
+                as={Link}
                 size='lg'
                 className='m-1'
                 variant='warning'
               >
                 Scopri di più
               </Button>
               <Button
+                as={Link}
                 href={`/schedule/${params}#calendar`}
                 size='lg'
                 className='m-1'

src/pages/index.jsx

@@ -9,6 +9,7 @@ import watch from "../assets/watch.svg";
 import { GatsbyImage, getImage } from "gatsby-plugin-image";
 import Seo from "../components/seo";
 import Hero from "../components/hero";
+import { Link } from "gatsby";
 
 const IndexPage = ({ data }) => {
   const isPast = new Date(data.site.siteMetadata.event.date) <= new Date();
@@ -219,6 +220,7 @@ const IndexPage = ({ data }) => {
                       })}
                     </ul>
                     <Button
+                      as={Link}
                       href='/schedule'
                       className='btn-lg'
                       variant='warning'