Broccoli Food
Мультиязычный продуктовый сайт
Сайт для производителя сублимированного питания с 3 языковыми версиями, полной RTL-адаптацией для арабского, интерактивным 3D-глобусом и AI-оптимизацией для нового поколения поисковиков.
Сублимированное питание для путешественников
Broccoli Food — производитель сублимированного питания. Основной продукт — гречка с курицей в удобной упаковке, которая готовится за 4-5 минут простым добавлением воды.
Целевая аудитория: туристы, путешественники, вахтовые работники, студенты, паломники (хадж и умра).
Скриншоты проекта
Арабская версия с полной RTL-адаптацией
Английская версия с секцией отзывов
Технология сублимации с научными ссылками
Реализованные возможности
3 языка + RTL
Полная поддержка русского, английского и арабского. RTL-адаптация затрагивает всё: направление текста, слайдеры, формы, навигацию.
- Динамическое переключение без перезагрузки
- Локализованные SEO-метаданные
- RTL для всех интерактивных элементов
3D-глобус Cobe
Интерактивная визуализация технологии сублимации с анимированным вращением и точками на карте мира.
- WebGL рендеринг
- Lazy loading для производительности
- Плавная анимация вращения
Калькулятор заказа
Расчёт стоимости в реальном времени с системой оптовых скидок и адаптивным слайдером.
- Динамическое ценообразование
- Оптовые скидки по порогам
- RTL-совместимый слайдер
Telegram + Payload CMS
Мгновенные уведомления о заявках в Telegram + сохранение всех данных в headless CMS.
- Параллельная отправка
- Отдельные коллекции для заказов и дилеров
- Форматированные сообщения
GDPR Cookie Banner
Баннер с тремя категориями cookie: необходимые, аналитика, маркетинг. Условная загрузка Яндекс.Метрики.
- Модальное окно настроек
- Сохранение в localStorage
- Условная аналитика
Юридическое соответствие
Политика конфиденциальности и условия использования на всех 3 языках. Соответствие 152-ФЗ.
- Privacy Policy на 3 языках
- Terms of Service на 3 языках
- Обязательное согласие в формах
Технологии проекта
Frontend
- Next.js 15
- React 19
- TypeScript
- Tailwind CSS 4
UI/UX
- shadcn/ui
- Radix UI
- Framer Motion
- Glassmorphism
3D/WebGL
- Cobe
- Canvas API
- requestAnimationFrame
Backend
- Payload CMS
- Collections API
- REST endpoints
Интеграции
- Telegram Bot API
- Яндекс.Метрика
- Payload CMS
Полная SEO-оптимизация
Сайт оптимизирован для поисковых систем с учётом мультиязычности. Каждая языковая версия имеет уникальные метаданные и правильную разметку.
Sitemap с hreflang
Динамический sitemap.xml с поддержкой языковых версий
6 типов JSON-LD
Organization, Product, FAQPage, WebSite, LocalBusiness, BreadcrumbList
Open Graph 3 языка
Уникальные OG-изображения и описания для каждого языка
60+ ключевых слов
Релевантные keywords на русском, английском и арабском
Canonical URLs
Правильные canonical для всех языковых версий
Preconnect/Preload
Оптимизация загрузки критических ресурсов
Оптимизация для AI
Сайт готов к новому поколению AI-поисковиков: ChatGPT, Claude, Perplexity. Специальные файлы и разметка помогают AI понимать контент.
llms.txt
Специальный файл для ChatGPT, Claude, Perplexity с информацией о продукте
robots.txt для AI
Разрешения для GPTBot, PerplexityBot, Claude-Web, anthropic-ai
FAQPage Schema
7 структурированных вопросов-ответов для featured snippets
humans.txt
Информация о команде разработки для прозрачности
Производительность
Оптимизации на всех уровнях: от загрузки ресурсов до рендеринга компонентов. Сайт быстро работает даже на медленном интернете.
Preconnect
К fonts.googleapis.com, fonts.gstatic.com
Lazy Loading
Изображения и тяжёлые компоненты загружаются по мере необходимости
Memoization
Оптимизация React-компонентов с useMemo и useCallback
requestAnimationFrame
Плавные scroll-события без блокировки UI
IntersectionObserver
Ленивая загрузка и анимации при появлении в viewport
CSS Containment
Изоляция рендеринга для повышения FPS
Мобильная адаптация
Mobile-first подход: сначала разрабатывается мобильная версия, затем масштабируется на десктоп.
Mobile-First
- Mobile-first подход к разработке
- Адаптивное меню с блокировкой скролла body
- Touch-события для слайдеров (swipe)
- Tap-цели минимум 44x44px
- Правильные viewport настройки
- Оптимизированные шрифты для мобильных
Этапы разработки
Анализ
Определение ЦА, функциональных требований, языковых версий
Дизайн
Визуальная концепция с акцентом на продукт и Glassmorphism
Разработка
Next.js 15, компонентная архитектура, маршрутизация
i18n + RTL
Система переводов, полная RTL-адаптация для арабского
Интеграции
Telegram Bot, Payload CMS, формы заявок
SEO + AI
Метаданные, JSON-LD, llms.txt, верификация
Тестирование
Кроссбраузерность, мобильные, RTL-проверка
Деплой
Хостинг, мониторинг, аналитика
Результат проекта
Современный продуктовый сайт
Быстрый, SEO-оптимизированный сайт с полным функционалом для приёма заказов. Мультиязычная поддержка открывает выход на международные рынки — арабские страны, СНГ, Европа. AI-оптимизация обеспечивает видимость в поисковых системах нового поколения на базе LLM.