2026-09-30 18:42:28 +03:30
|
|
|
|
<template>
|
|
|
|
|
|
<div class="min-h-screen px-6 pb-24 pt-28 md:px-10">
|
2026-09-30 20:41:48 +03:30
|
|
|
|
<SiteNavbar brand="منتک" />
|
2026-09-30 18:42:28 +03:30
|
|
|
|
<div class="mx-auto max-w-[1500px]">
|
2026-09-30 20:33:37 +03:30
|
|
|
|
<h1 class="font-display text-4xl font-extrabold md:text-6xl">گالری</h1>
|
|
|
|
|
|
<p class="mt-4 max-w-xl text-ash">تصاویر منتخب از پروژهها و فضای استودیو.</p>
|
2026-09-30 18:42:28 +03:30
|
|
|
|
<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">
|
2026-09-30 20:33:37 +03:30
|
|
|
|
<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>
|
2026-09-30 18:42:28 +03:30
|
|
|
|
</figcaption>
|
|
|
|
|
|
</figure>
|
|
|
|
|
|
</div>
|
2026-09-30 20:33:37 +03:30
|
|
|
|
<p v-if="!items?.length" class="mt-10 text-ash">گالری خالی است.</p>
|
2026-09-30 18:42:28 +03:30
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
|
|
|
const { data: items } = await useAsyncData("gallery", () => fetchPublicGallery());
|
|
|
|
|
|
const { data: page } = await useAsyncData("page-gallery", () => fetchPage("gallery"));
|
|
|
|
|
|
applyPageSeo(page.value?.seo);
|
|
|
|
|
|
</script>
|
