Check out Footers Are Underrated and Footers 101 from Nielsen Norman Group. Footers are awesome. Go wild!

Note: in the examples below the spacing is a little off. This won't happen in practice though if you do something like this:

export default () => {
  return (
    <>
      <Navbar route={route} />
      <Container size="xl">
        <Component />
      </Container>
      <Footer />
    </>
  );
}

Note: check out this CSS Tricks article on how to get a footer that alawys stays at the bottom of the page (something you'll probably want). My preferred approach is to utilize flexbox by wrapping the Navar, Container and Footer in a Stack like so:

export default () => {
  return (
    <Stack class="min-h-screen">
      <Navbar route={route} />
      <Container size="xl" class="grow">
        <Component />
      </Container>
      <Footer />
    </Stack>
  );
}