v3.accords-library.com/src/pages/[locale]/index.astro

---
import Button from "components/Button.astro";
import LibraryGrid from "./_components/LibraryGrid.astro";
import LinkCard from "./_components/LinkCard.astro";
import { getI18n } from "src/i18n/i18n";
import { contextCache } from "src/utils/payload";
import AppLayout from "components/AppLayout/AppLayout.astro";
import HomeTitle from "./_components/HomeTitle.astro";

const { t, getLocalizedUrl } = await getI18n(Astro.locals.currentLocale);
---

{/* ------------------------------------------- HTML ------------------------------------------- */}

<AppLayout
  openGraph={{ title: t("home.title") }}
  backgroundImage={contextCache.config.home.backgroundImage}
  hideFooterLinks
  hideHomeButton
  class="app">
  <HomeTitle />
  <p class="prose" set:html={t("home.description")} />

  <a href={getLocalizedUrl("/about")} hidden>
    <Button title={t("home.aboutUsButton")} icon="material-symbols:left-click" />
  </a>

  <div id="main">
    <section id="library">
      <h2 class="font-serif font-3xl">{t("home.librarySection.title")}</h2>
      <p set:html={t("home.librarySection.description")} />
      <a href={getLocalizedUrl("/search")} hidden>
        <Button
          class="section-button"
          title={t("home.librarySection.button")}
          icon="material-symbols:browse"
        />
      </a>
      <div class="grid">
        <LibraryGrid />
      </div>
    </section>

    <section hidden>
      <h2 class="font-serif font-3xl">{t("home.changesSection.title")}</h2>
      <p set:html={t("home.changesSection.description")} />
      <a href={getLocalizedUrl("/changelog")}>
        <Button
          class="section-button"
          title={t("home.changesSection.button")}
          icon="material-symbols:history"
        />
      </a>
    </section>

    <section>
      <h2 class="font-serif font-3xl">{t("home.moreSection.title")}</h2>
      <p set:html={t("home.moreSection.description")} />
      <div class="grid">
        <LinkCard
          icon="material-symbols:movie"
          title={t("footer.links.videos.title")}
          subtitle={t("footer.links.videos.subtitle", { count: 2115 })}
          href={getLocalizedUrl("/videos")}
          hidden
        />

        <LinkCard
          icon="material-symbols:folder-zip"
          title={t("footer.links.webArchives.title")}
          subtitle={t("footer.links.webArchives.subtitle", { count: 20 })}
          href={getLocalizedUrl("/archives")}
          hidden
        />

        <LinkCard
          icon="material-symbols:calendar-month"
          title={t("footer.links.timeline.title")}
          subtitle={t("footer.links.timeline.subtitle", {
            eraCount: contextCache.config.timeline.eras.length,
            eventCount: contextCache.config.timeline.eventCount,
          })}
          href={getLocalizedUrl("/timeline")}
        />

        <LinkCard
          icon="material-symbols:perm-media"
          title={t("footer.links.gallery.title")}
          subtitle={t("footer.links.gallery.subtitle", { count: 5750 })}
          href="https://gallery.accords-library.com/posts"
        />
      </div>
    </section>

    <section>
      <h2 class="font-serif font-3xl">{t("home.linksSection.title")}</h2>
      <p set:html={t("home.linksSection.description")} />
      <div class="grid">
        <LinkCard
          icon="discord-brands"
          title={t("footer.socials.discord.title")}
          subtitle={t("footer.socials.discord.subtitle")}
          href="/discord"
        />
        <LinkCard
          icon="x-brands"
          title={t("footer.socials.twitter.title")}
          subtitle={t("footer.socials.twitter.subtitle")}
          href="https://twitter.com/AccordsLibrary"
        />
        <LinkCard
          icon="github-brands"
          title={t("footer.socials.github.title")}
          subtitle={t("footer.socials.github.subtitle")}
          href="https://github.com/Accords-Library"
        />
        <div>
          <LinkCard
            icon="material-symbols:mail"
            title={t("footer.socials.contact.title")}
            subtitle={t("footer.socials.contact.subtitle")}
            href={getLocalizedUrl("/contact")}
          />
        </div>
      </div>
    </section>
  </div>
</AppLayout>

{/* ------------------------------------------- CSS -------------------------------------------- */}

<style>
  .app {
    display: flex;
    flex-direction: column;
    gap: 32px;
  }

  #main {
    display: flex;
    flex-direction: column;
    gap: 64px;
    margin-top: 64px;
  }

  section {
    & > p {
      max-width: 35em;
      line-height: 1.5;
      margin-top: 12px;
      margin-bottom: 24px;
    }

    &#library {
      & > .grid {
        @media (max-width: 40rem) {
          grid-template-columns: 1fr 1fr;
        }

        @media (max-width: 22rem) {
          grid-template-columns: 1fr;
        }
      }
    }

    & > .grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
      gap: clamp(6px, 2vmin, 16px);

      @media (max-width: 22rem) {
        gap: 12px;
      }
    }
  }
</style>