Replace the landing with the artifact design and rebuild the admin in Ant Design.

Adds consultation leads, section editors, and the one-time content reset for this release.

Co-authored-by: Cursor <cursoragent@cursor.com>

apps/landing/pages/gallery.vue

@@ -1,37 +1,42 @@
 <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>
+  <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-if="!items?.length" class="mt-10 text-ash">گالری خالی است.</p>
+      <p v-else class="text-center text-slate-500 dark:text-slate-400">گالری خالی است.</p>
     </div>
-  </div>
+  </section>
 </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);
+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>