Add a Footer

This chapter guides you how to add a custom footer to all pages.

1. Add footer component: Add a new Astro component file to your project under src/components/Footer.astro.
2. Implement footer: Implement your footer component using HTML and Tailwind CSS. Here is an example:

   ---
   ---
   <footer
     class="flex h-36 w-full items-center justify-center bg-gray-800 px-4 text-gray-200 md:px-8">
       {Astro.locals.i18n.t("x.footer.text")}
   </footer>

3. Add translations: If your footer uses translation keys like in the example above, add the translations to src/translations.
4. Set footer in configuration: Inside astro.config.mjs add a footerComponent property to the LightNet integration. This needs to reference the component created in step 1:

   astro.config.mjs

   export default defineConfig({
       integrations: [
           lightnet({
               // ...
               footerComponent: "./src/components/Footer.astro",
           }),
       ],
   })