smooth scrolling

src/components/Navbar.tsx

@@ -12,6 +12,14 @@ interface NavLink {
   href: string;
 }
 
+function scrollToSection(e: React.MouseEvent, href: string) {
+  e.preventDefault();
+
+  document.querySelector(href)!.scrollIntoView({
+    behavior: 'smooth',
+  });
+}
+
 function NavlinkList(props: { navlinks: NavLink[] }) {
   const { t } = useTranslation();
 
@@ -19,7 +27,7 @@ function NavlinkList(props: { navlinks: NavLink[] }) {
     <>
       <StyledNavlinkList>
         {props.navlinks.map((navlink) => (
-          <StyledNavlink key={navlink.title} href={navlink.href}>
+          <StyledNavlink key={navlink.title} href={navlink.href} onClick={(e) => scrollToSection(e, navlink.href)}>
             {t(`navbar.${navlink.title}`)}
           </StyledNavlink>
         ))}
@@ -68,7 +76,9 @@ export default function Navbar() {
 
   return (
     <StyledNavbar>
-      <StyledNavlinkBrand>{t('navbar.title')}</StyledNavlinkBrand>
+      <StyledNavlinkBrand href="#" onClick={(e) => scrollToSection(e, '#landing')}>
+        {t('navbar.title')}
+      </StyledNavlinkBrand>
       <NavlinkList navlinks={navlinks} />
     </StyledNavbar>
   );