Align seed, shared brand, and landing UI with the correct Montech Farsi name. Co-authored-by: Cursor <cursoragent@cursor.com>
29 lines
1.3 KiB
Vue
29 lines
1.3 KiB
Vue
<template>
|
||
<div class="min-h-screen px-6 pb-24 pt-28 md:px-10">
|
||
<SiteNavbar brand="منتک" />
|
||
<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 { data: items } = await useAsyncData("gallery", () => fetchPublicGallery());
|
||
const { data: page } = await useAsyncData("page-gallery", () => fetchPage("gallery"));
|
||
applyPageSeo(page.value?.seo);
|
||
</script>
|