MahdiandCursor
7e8e1b1f1b
Scaffold SSR site with CMS/blog/gallery/SEO admin and deploy configs for montech.ir. 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="Montech" />
|
|
<div class="mx-auto max-w-[1500px]">
|
|
<h1 class="font-display text-5xl font-extrabold uppercase tracking-[-0.03em] md:text-7xl">Gallery</h1>
|
|
<p class="mt-4 max-w-xl text-ash">Selected visuals from projects and studio life.</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 uppercase">{{ item.title }}</p>
|
|
<p v-if="item.category" class="mt-1 font-mono text-[10px] tracking-[0.2em] text-ash">{{ item.category }}</p>
|
|
</figcaption>
|
|
</figure>
|
|
</div>
|
|
<p v-if="!items?.length" class="mt-10 text-ash">Gallery is empty.</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>
|