Wireframes Alignment Design

Decisions

Aspect	Decision	Rationale
Footer	Full 4-column layout per wireframes, placeholder links (#)	Business wants MVP to look complete
Breadcrumbs	Add to product page	Standard marketplace UX, good for SEO
Borders	Keep 1px (Tailwind default)	Modern look, no conflict with Nuxt UI
Hover effects	Keep shadow-md	Already works, modern feel
Categories grid	Compact to 120px minmax, smaller text/icons	Match wireframes density
Units	rem only, use SCSS functions	Consistent scaling, design token system

---

1. Footer (AppFooter.vue)

Widget: app/widgets/footer/ui/AppFooter.vueLayout: default.vue

4-column grid (desktop) → 2 columns (tablet) → 1 column (mobile). Dark background (bg-gray-900 dark:bg-gray-950), light text.

Sections

Column	Title	Links
Покупателям	Каталог /catalog, Как купить #, Оплата и доставка #, Гарантии #
Продавцам	Разместить объявление /cabinet/products/new, Тарифы #, Правила #
Компания	О нас #, Контакты #, Политика конфиденциальности #
Контакты	Email, телефон, г. Санкт-Петербург

Bottom bar: border-top border-gray-700, © 2026 Partizap.

All text via i18n keys (footer.buyers.title, footer.sellers.title, etc.).

---

2. Breadcrumbs (Product Page)

Feature: app/features/product-breadcrumbs/composables/useProductBreadcrumbs.tsPage: app/pages/product/[id].vue

Chain: Главная → Категория → Подкатегория → Название товара

Built from product's primary_category_id → walk up parent_id tree → array of { label, to }. Last item (product title) has no link, shown as muted text.

Uses Nuxt UI <UBreadcrumb> component.

---

3. Visual Adjustments

Categories grid (homepage)

• Grid: minmax(160px) → minmax(120px) — more compact
• Category text: text-sm → text-xs (12px)
• Icon: h-8 w-8 → h-6 w-6

Hero divider

• "или по автомобилю" text: add uppercase tracking-wider