MahdiandCursor
b0088c35d1
Adds consultation leads, section editors, and the one-time content reset for this release. Co-authored-by: Cursor <cursoragent@cursor.com>
43 lines
2.1 KiB
Vue
43 lines
2.1 KiB
Vue
<template>
|
|
<section class="py-24 relative overflow-hidden">
|
|
<div class="absolute top-0 right-0 w-[500px] h-[500px] bg-brand-100/50 dark:bg-brand-600/15 rounded-full blur-[140px] pointer-events-none -z-10" />
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<PageHeading
|
|
:title="page?.title || 'گالری'"
|
|
:subtitle="page?.seo?.description || 'تصاویر منتخب از پروژهها و فضای استودیو منتک.'"
|
|
:crumbs="[{ label: 'خانه', to: '/' }, { label: page?.title || 'گالری', to: '/gallery' }]"
|
|
/>
|
|
|
|
<div v-if="items?.length" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
<figure
|
|
v-for="item in items"
|
|
:key="item.id"
|
|
class="fade-item group bg-white dark:bg-slate-900/90 rounded-3xl border border-slate-200/90 dark:border-slate-800 shadow-soft-card hover:shadow-hover-card hover:border-brand-300 dark:hover:border-brand-500/50 transition-all duration-300 overflow-hidden text-right"
|
|
>
|
|
<div class="aspect-[4/3] bg-slate-100 dark:bg-slate-800 overflow-hidden">
|
|
<SafeImage :src="item.imageUrl" :alt="item.title" width="640" height="480" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105" />
|
|
</div>
|
|
<figcaption class="p-5">
|
|
<p class="text-base font-bold text-slate-900 dark:text-white">{{ item.title }}</p>
|
|
<p v-if="item.category" class="mt-1 text-xs text-slate-500 dark:text-slate-400">{{ item.category }}</p>
|
|
</figcaption>
|
|
</figure>
|
|
</div>
|
|
<p v-else class="text-center text-slate-500 dark:text-slate-400">گالری خالی است.</p>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
const [{ data: items }, { data: page }] = await Promise.all([
|
|
useAsyncData("gallery", () => apiFetch<GalleryItem[]>("/api/public/gallery").catch(() => [])),
|
|
usePageMeta("gallery"),
|
|
]);
|
|
|
|
usePageSeo(() => page.value?.seo ?? { title: "گالری — منتک" });
|
|
useBreadcrumbJsonLd([
|
|
{ name: "خانه", path: "/" },
|
|
{ name: page.value?.title || "گالری", path: "/gallery" },
|
|
]);
|
|
</script>
|