index.astro

---
import { getEntry } from "astro:content";
import { getCurrentLocale, getUiTranslator } from "@/src/i18n/utils";
import { Icon } from "../Icon";
import Banner from "@components/Banner/index.astro";

const currentLocale = getCurrentLocale(Astro.url.pathname);
const t = await getUiTranslator(currentLocale);

const bannerEntry = await getEntry("banner", currentLocale);
---

<footer
  class="text-body border-t border-black grid-cols-3 lg:grid-cols-4 grid gap-x-gutter-sm md:gap-x-gutter-md pt-md pb-5 px-lg bg-accent-color text-accent-type-color content-start"
>
  <div class="grid lg:row-span-2 grid-rows-subgrid">
    <div>
      <div class="mb-5">p5.js</div>
    </div>
    <div
      class="self-end w-28 max-w-full lg:w-32 text-accent-type-color lg:-top-2 relative"
    >
      <Icon kind="asterisk-thick" />
    </div>
  </div>
  <div>
    <div class="mb-5" id="resources-footer-category">{t("Resources")}</div>
    <ul aria-labelledby="resources-footer-category">
      <li><a href="/reference">{t("Reference")}</a></li>
      <li><a href="/tutorials">{t("Tutorials")}</a></li>
      <li><a href="/examples">{t("Examples")}</a></li>
      <li><a href="/contribute">{t("Contribute")}</a></li>
      <li><a href="/community">{t("Community")}</a></li>
      <li><a href="/about">{t("About")}</a></li>
      <li><a href="https://editor.p5js.org">{t("Start Coding")}</a></li>
      <li><a href="/donate">{t("Donate")}</a></li>
    </ul>
  </div>
  <div class="lg:col-span-2 grid grid-cols-subgrid">
    <div>
      <div class="mb-5" id="info-footer-category">{t("Information")}</div>
      <ul aria-labelledby="info-footer-category">
        <li><a href="/download">{t("Download")}</a></li>
        <li><a href="/contact">{t("Contact")}</a></li>
        <li><a href="/copyright">{t("Copyright")}</a></li>
        <li><a href="/privacy-policy">{t("Privacy Policy")}</a></li>
        <li><a href="/terms-of-use">{t("Terms of Use")}</a></li>
      </ul>
    </div>
    <div class="lg:col-start-2 mt-xl lg:mt-0">
      <div class="mb-5" id="socials-footer-category">{t("Socials")}</div>
      <ul aria-labelledby="socials-footer-category">
        <li><a href="https://github.com/processing/p5.js">GitHub</a></li>
        <li><a href="https://www.instagram.com/p5xjs/">Instagram</a></li>
        <li><a href="https://twitter.com/p5xjs">X</a></li>
        <li><a href="https://www.youtube.com/@ProcessingFoundation">YouTube</a></li>     
        <li><a href="https://discord.gg/SHQ8dH25r9">Discord</a></li>
        <li>
          <a href="https://discourse.processing.org/c/p5js">{t("Forum")}</a>
        </li>
      </ul>
    </div>
  </div>
</footer>
{bannerEntry && !bannerEntry.data.hidden && (<Banner entry={bannerEntry} />)}

<style></style>