Эталон Ковка — Интернет-магазин кованых изделий

Премиальный интернет-магазин декоративных кованых изделий с тёмным люкс-дизайном.

Стек

• Vue 3 (Composition API, script setup)
• Pinia (state management)
• Tailwind CSS 4 (utility-first + @theme переменные)
• Vite (сборка)

Установка и запуск

npm install
npm run dev      # dev-сервер на localhost:5173
npm run build    # production-сборка в dist/
npm run preview  # предпросмотр production-сборки

Функционал

Каталог

• 10 категорий кованых изделий
• 60+ товаров с фото, ценой, описанием, материалом
• Фильтрация по категории, цене, названию
• Поиск по каталогу
• Пагинация (20 товаров на страницу)

Корзина и оформление

• Добавление в корзину с количеством
• Боковая выдвижная корзина (CartDrawer)
• Страница корзины с управлением количеством
• Оформление заказа: контактные данные, доставка, оплата
• Оформление через WhatsApp — предзаполненное сообщение с составом заказа
• Оформление через Telegram — аналогично

Избранное

• Добавление/удаление товаров в избранное
• Отдельная страница избранного

Блок «Способы применения»

• 5 фото-примеров: перила, заборы, балконы, решётки, ворота
• Premium hover-эффекты с overlay

Админ-панель (/admin)

• Авторизация по паролю (SHA-256 хеширование)
• Дашборд со статистикой
• CRUD товаров: добавление, редактирование, удаление
• Скрытие цены (hidePrice) — клиент видит «Цена по запросу»
• Данные хранятся в localStorage

Дизайн

• Тёмный люкс: угольный фон + золотые акценты
• Shimmer-эффект на CTA-кнопках и бейджах
• Cinzel (заголовки) + Manrope (текст)
• Ornamental dividers
• Scroll-анимации (v-reveal)
• Glassmorphism элементы

Структура

src/
├── assets/main.css            # Дизайн-система
├── components/                # Vue-компоненты
├── composables/               # Composables (SEO, phone mask, messenger)
├── data/catalog.json          # Каталог товаров
├── router/index.js            # Маршруты
├── stores/                    # Pinia stores
└── views/                     # Страницы (+ admin/)

Настройка

Мессенджеры

В src/composables/useMessengerOrder.js замени плейсхолдеры:

const WHATSAPP_PHONE = '70000000000'    // → реальный номер
const TELEGRAM_USERNAME = 'etalonkovka' // → реальный username

Админ-панель

Пароль по умолчанию: admin123. Хранится как SHA-256 хеш в src/stores/admin.js.

Контакты

Обнови телефон, email и адрес в AppFooter.vue и ContactsView.vue.