Montech_Landing/apps/landing/pages/gallery.vue

<template>
  <div class="min-h-screen px-6 pb-24 pt-28 md:px-10">
    <SiteNavbar
      :brand="chrome.brand"
      :logo-url="chrome.logoUrl"
      :timezone="chrome.timezone"
    />
    <div class="mx-auto max-w-[1500px]">
      <h1 class="font-display text-4xl font-extrabold md:text-6xl">گالری</h1>
      <p class="mt-4 max-w-xl text-ash">تصاویر منتخب از پروژه‌ها و فضای استودیو.</p>
      <div class="mt-16 grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
        <figure v-for="item in items" :key="item.id" class="overflow-hidden border border-white/[0.07] bg-coal">
          <div
            class="aspect-[4/3] bg-cover bg-center"
            :style="item.imageUrl ? { backgroundImage: `url(${item.imageUrl})` } : {}"
          />
          <figcaption class="p-4">
            <p class="font-display text-lg font-bold">{{ item.title }}</p>
            <p v-if="item.category" class="mt-1 text-xs text-ash">{{ item.category }}</p>
          </figcaption>
        </figure>
      </div>
      <p v-if="!items?.length" class="mt-10 text-ash">گالری خالی است.</p>
    </div>
  </div>
</template>

<script setup lang="ts">
const chrome = await useSiteChrome();
const { data: items } = await useAsyncData("gallery", () => fetchPublicGallery(), {
  getCachedData: () => undefined,
});
const { data: page } = await useAsyncData("page-gallery", () => fetchPage("gallery"), {
  getCachedData: () => undefined,
});
applyPageSeo(page.value?.seo);
</script>