🍯 VRNHoney - Сайт продажи натурального мёда в Воронеже

📋 Описание проекта

VRNHoney - это современный веб-сайт для продажи натурального мёда высокого качества в Воронеже. Сайт построен на технологии AMP (Accelerated Mobile Pages) для обеспечения быстрой загрузки и отличного пользовательского опыта на всех устройствах.

✨ Основные возможности

• Информативные разделы о полезных свойствах мёда
• Галерея изображений пасеки и продуктов
• Каталог товаров с ценами и возможностью заказа
• Адаптивный дизайн для всех устройств
• AMP-оптимизация для быстрой загрузки
• SEO-оптимизация с мета-тегами и sitemap

🚀 Технологический стек

• HTML5 с семантической разметкой для лучшего SEO
• CSS3 с современными возможностями (Grid, Flexbox, CSS Variables)
• AMP (Accelerated Mobile Pages) для оптимизации производительности
• JavaScript для интерактивности и управления состоянием
• Responsive Design для адаптации ко всем устройствам

📁 Структура проекта

VRNHoney/
├── main.html      # Основная HTML страница (оптимизированная версия)
├── main.html               # Оригинальная HTML страница (для сравнения)
├── main2.html             # Дополнительная HTML страница
├── styles.css              # Основные стили CSS (отделенный от HTML)
├── sitemap.xml            # Карта сайта для SEO-оптимизации
├── robots.txt             # Инструкции для поисковых роботов
├── images/                # Папка с изображениями и медиа-файлами
│   ├── Background.jpeg    # Фоновое изображение главной страницы
│   ├── VRNHoney.ico      # Иконка сайта (favicon)
│   ├── *.jpg             # Изображения галереи продуктов
│   └── *.ico             # Иконки партнёров и разработчиков
├── optimize-images.sh     # Скрипт автоматической оптимизации изображений
└── README.md              # Документация проекта (этот файл)

🎨 Особенности дизайна

• Современный минималистичный дизайн с акцентом на контент
• Градиентные кнопки и навигация для визуальной привлекательности
• Стеклянный эффект (backdrop-filter) для современного вида
• Плавные анимации и переходы для улучшения UX
• Адаптивная сетка для галереи с использованием CSS Grid
• Оптимизированная типографика с использованием clamp() для адаптивности

📱 Адаптивность

Сайт полностью адаптирован для всех устройств:

• Desktop (1200px+) - полная функциональность и большие изображения
• Tablet (768px - 1199px) - адаптированная навигация и средние изображения
• Mobile (320px - 767px) - мобильное меню и оптимизированные изображения

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

1. Клонируйте репозиторий:

2. Откройте в браузере:

   • Просто откройте
     main.html
     в любом современном браузере
   • Или используйте локальный сервер для разработки (рекомендуется)

3. Для разработки рекомендуется использовать локальный сервер:

📊 Производительность

• AMP-валидация - 100% (полное соответствие стандартам)
• PageSpeed Insights - 90+ (мобильные устройства)
• Core Web Vitals - Оптимизированы (LCP, FID, CLS)
• SEO Score - 95+ (отличная оптимизация для поиска)

🎯 SEO-оптимизация

• Мета-теги для поисковых систем (title, description, keywords)
• Open Graph для социальных сетей (Facebook, VK, Instagram)
• Twitter Cards для Twitter (карточки в твитах)
• Структурированные данные (Schema.org) для лучшего понимания контента
• Sitemap.xml для индексации всех страниц сайта
• Robots.txt для управления поисковыми роботами

🖼️ Оптимизация изображений

Все изображения оптимизированы для веба:

• WebP формат для современных браузеров
• JPEG сжатие для фотографий
• Responsive images с srcset
• Lazy loading для галереи

📱 AMP-специфика

Сайт использует следующие AMP-компоненты:

• amp-img
  - для изображений с автоматической оптимизацией
• amp-ad
  - для рекламы (Yandex.RTB)
• amp-bind
  - для интерактивности и управления состоянием
• amp-lightbox
  - для галереи изображений
• amp-carousel
  - для слайдеров и карусели

🌐 Браузерная поддержка

• Chrome 60+ (полная поддержка всех функций)
• Firefox 55+ (совместимость с современными CSS-свойствами)
• Safari 12+ (поддержка iOS и macOS)
• Edge 79+ (новые версии на Chromium)
• Mobile browsers (iOS Safari, Chrome Mobile) - оптимизировано для мобильных устройств

🔄 Обновления и поддержка

Версия 2.0 (Текущая)

• ✅ Разделение CSS и HTML для лучшей организации кода
• ✅ Улучшенная адаптивность для всех устройств
• ✅ SEO-оптимизация с мета-тегами и sitemap
• ✅ AMP-валидация для соответствия стандартам
• ✅ Оптимизация изображений для быстрой загрузки

Планы на будущее

• Система корзины покупок для удобства заказа
• Онлайн-заказ с автоматическим расчетом стоимости
• Личный кабинет для отслеживания заказов
• Блог о пчеловодстве и полезных свойствах мёда
• API для мобильного приложения

📞 Контакты

• Телефон: +7 (952) 557-44-10 (Юрий) - основной контакт
• Телефон: +7 (950) 779-85-99 (Галина) - дополнительный контакт
• VK: vk.com/vrnhoney_ru - группа в социальной сети
• Сайт: vrnhoney.ru - официальный сайт

👥 Команда

• Разработка: Serpmonn - основная команда разработчиков
• Партнёры:
  • Adventure36 - партнёр по развитию
  • OneHouseBoat - партнёр по продвижению

📄 Лицензия

Проект распространяется под лицензией MIT. См. файл

🤝 Вклад в проект

Мы приветствуем вклад в развитие проекта! Пожалуйста:

1. Форкните репозиторий - создайте свою копию проекта
2. Создайте ветку для новой функции или исправления
3. Внесите изменения в соответствии с код-стайлом проекта
4. Создайте Pull Request для рассмотрения ваших изменений

📝 Чейнджлог

v2.0.0 (2024-12-19)

• ✨ Полная реструктуризация проекта - улучшенная архитектура
• 🎨 Разделение CSS и HTML - лучшая организация кода
• 📱 Улучшенная адаптивность - поддержка всех устройств
• 🔍 SEO-оптимизация - мета-теги, Open Graph, sitemap
• ⚡ AMP-валидация - соответствие стандартам Google
• 🖼️ Оптимизация изображений - автоматические скрипты

v1.0.0 (2024-01-01)

• 🚀 Первоначальный релиз - базовая версия сайта
• 📱 Базовая AMP-функциональность - основные компоненты
• 🎨 Основной дизайн - первичная структура и стили

VRNHoney - Натуральный мёд высокого качества в Воронеже! 🍯✨