MVP Final Tasks — Design

Task 1: Contact buttons on product detail page

File: app/pages/product/[id].vue (lines 113-120)

Current: Two buttons with disabled attribute:

<UButton color="primary" size="lg" disabled>&#123;&#123; t('productDetail.contactSeller') }}</UButton>
<UButton variant="outline" size="lg" disabled>&#123;&#123; t('product.showPhone') }}</UButton>

Change: Remove disabled, add @click with toast (same pattern as seller page):

<UButton color="primary" size="lg" @click="handleContactSeller">
  &#123;&#123; t('productDetail.contactSeller') }}
</UButton>
<UButton variant="outline" size="lg" @click="handleShowPhone">
  &#123;&#123; t('product.showPhone') }}
</UButton>

Both handlers show toast:

const toast = useToast()
function handleContactSeller() {
  toast.add({ title: t('seller.messagingComingSoon'), description: t('seller.messagingDescription'), color: 'info' })
}
function handleShowPhone() {
  toast.add({ title: t('seller.messagingComingSoon'), description: t('seller.messagingDescription'), color: 'info' })
}

Reuse existing i18n keys from seller.* section.

Task 2: Branded error page

File: app/error.vue (new file)

Structure:

• Full-page centered layout (no header/footer — Nuxt error pages are outside layouts)
• Partizap logo at top (link to home)
• Tematic SVG illustration (car with wrench/broken gear — auto parts themed)
• Error code large (404 / 500)
• Error message: "Страница не найдена" for 404, "Что-то пошло не так" for others
• Description text
• "На главную" button
• Dark mode support

Props: Nuxt passes error prop with { statusCode, statusMessage }.

i18n keys to add:

error.pageNotFound — "Страница не найдена"
error.pageNotFoundDescription — "Запчасть могла быть снята с продажи или страница была удалена"
error.serverError — "Что-то пошло не так"
error.serverErrorDescription — "Мы уже работаем над исправлением. Попробуйте позже"
error.goHome — "На главную"

SVG illustration: Generate inline SVG — a stylized car dashboard gauge or engine with a wrench, in gray/primary color scheme. Keep it simple, monoline style to match Nuxt UI aesthetic.

Decisions Log

Question	Decision
Contact buttons on product page	Toast "Скоро будет доступно" (same as seller page)
Footer	Leave as-is (copyright only)
Error page style	Branded with auto-themed illustration
Mobile catalog filters	Leave as-is