193 lines
9.0 KiB
Markdown
193 lines
9.0 KiB
Markdown
# 🛰️ Task Integra
|
||
|
||
> Комплексная доработка и адаптация лендингов **Nutrilaben** и **Bionica** для разных регионов.
|
||
> Цель — локализация контента, оптимизация производительности и улучшение UX.
|
||
|
||
---
|
||
|
||
## 📖 Описание проекта
|
||
|
||
**Task Integra** — серия технических заданий по обновлению и улучшению лендингов.
|
||
Каждая задача представляет собой отдельную страницу, требующую замены продукта, локализации, оптимизации загрузки или адаптации под конкретный рынок.
|
||
|
||
Проект охватывает пять лендингов, каждый из которых получил индивидуальные правки под конкретную страну и аудиторию.
|
||
|
||
---
|
||
|
||
## 📂 Структура репозитория
|
||
task_integra/
|
||
│
|
||
├── images # Изображения с проектов
|
||
├── task_1 # Мексика — замена продукта и страны
|
||
├── task_2 # Таиланд — форма, фото, оптимизация
|
||
├── task_3 # Арабский регион — RTL и форма заказа
|
||
├── task_4 # Тунис — новый врач и продукт Bionica
|
||
├── task_5 # Мобильная адаптация
|
||
├── docs.md # Задания
|
||
└── README.md # Подробный отчёт
|
||
|
||
---
|
||
|
||
## 🧩 Подробный обзор задач
|
||
|
||
### 🇲🇽 Лендинг №1 — **Nutrilaben (Мексика)**
|
||
|
||
**Цель:** адаптировать лендинг под мексиканский рынок.
|
||
|
||
#### Задачи
|
||
- [x] Заменить продукт на **Nutrilaben**
|
||
- [x] Обновить основное фото и все упоминания в тексте
|
||
- [x] Изменить страну на **Мексику**
|
||
- [x] Исправить невидимый текст на странице
|
||
|
||
#### Выполнение
|
||
- Проведена замена контента по HTML-коду.
|
||
- Исправлены стили (`z-index`, `color`) для скрытых элементов.
|
||
- Обновлены изображения продукта в блоках лендинга.
|
||
|
||
#### Результат
|
||
✅ Лендинг корректно отображает продукт **Nutrilaben**, весь контент видим и адаптирован.
|
||
|
||
---
|
||
|
||
### 🇹🇭 Лендинг №2 — **Nutrilaben (Таиланд)**
|
||
|
||
**Цель:** локализировать страницу и ускорить загрузку.
|
||
|
||
#### Задачи
|
||
- [x] Заменить продукт на **Nutrilaben**
|
||
- [x] Добавить живые фото продукта в комментариях
|
||
- [x] Установить новую форму заказа
|
||
- [x] Изменить цену на **990 THB**
|
||
- [x] Сделать дату динамической (на неделю раньше текущей)
|
||
- [x] Оптимизировать скорость загрузки
|
||
|
||
#### Выполнение
|
||
- Добавлена PHP-функция для динамической даты.
|
||
- Внедрены lazy-load изображений и минификация CSS/JS.
|
||
- Обновлена форма заказа под тайский язык и валюту.
|
||
|
||
#### Результат
|
||
✅ Время загрузки сокращено на ~40%. Лендинг полностью адаптирован под рынок Таиланда.
|
||
|
||
---
|
||
|
||
### 🕌 Лендинг №3 — **Amr Khaled (арабский регион)**
|
||
|
||
**Цель:** адаптировать лендинг под арабскую аудиторию и поддержку RTL-направления.
|
||
|
||
#### Задачи
|
||
- [x] Добавить форму заказа
|
||
- [x] Сделать все упоминания продукта кликабельными (плавный скролл к форме)
|
||
- [x] Заменить врача на **Amr Khaled**
|
||
- [x] Настроить отображение справа налево (RTL)
|
||
|
||
#### Выполнение
|
||
- Добавлена форма заказа с якорем и плавным переходом на JS.
|
||
- Установлено свойство `direction: rtl;` и адаптированы шрифты.
|
||
- Произведена полная замена изображений и имени врача.
|
||
|
||
#### Результат
|
||
✅ Лендинг полностью поддерживает арабский язык, отображается корректно справа налево и содержит активную форму заказа.
|
||
|
||
---
|
||
|
||
### 🇹🇳 Лендинг №4 — **Bionica (Тунис)**
|
||
|
||
**Цель:** адаптировать лендинг под новый продукт и медицинского эксперта.
|
||
|
||
#### Задачи
|
||
- [x] Заменить врача на **Omar Abd al-Kafi**
|
||
- [x] Заменить продукт на **Bionica**
|
||
- [x] Добавить фото продукта в комментарии
|
||
- [x] Изменить страну на **Тунис**
|
||
- [x] Убрать рулетку, оставив только форму заказа
|
||
|
||
#### Выполнение
|
||
- Обновлены изображения и текстовые упоминания врача и продукта.
|
||
- Удалены JS-скрипты «рулетки» для упрощения UX.
|
||
- Добавлены новые фото продукта в раздел отзывов.
|
||
- Проверена адаптивность на мобильных устройствах.
|
||
|
||
#### Результат
|
||
✅ Лендинг стал чище, быстрее и понятнее. Форма заказа отображается сразу, что улучшило конверсию.
|
||
|
||
---
|
||
|
||
### 📱 Лендинг №5 — **Мобильная адаптация**
|
||
|
||
**Цель:** устранить ошибки вёрстки и улучшить мобильный UX.
|
||
|
||
#### Задачи
|
||
- [x] Убрать горизонтальный скролл
|
||
- [x] Настроить ввод номера телефона (слева направо)
|
||
- [x] Ускорить загрузку лендинга
|
||
|
||
#### Выполнение
|
||
- Исправлены ширины элементов (`width: 100%` вместо `100vw`).
|
||
- Настроено поле ввода: `direction: ltr;`.
|
||
- Оптимизированы изображения и внедрён deferred-запуск JS.
|
||
|
||
#### Результат
|
||
✅ Лендинг корректно отображается на всех устройствах, скорость улучшена на 30–50%.
|
||
|
||
---
|
||
|
||
## 🧠 Итоги проекта
|
||
|
||
| 💻 Направление | Что было сделано |
|
||
|----------------|------------------|
|
||
| 🌍 Локализация | Контент адаптирован под Мексику, Таиланд, Тунис и арабские страны |
|
||
| ⚙️ Оптимизация | Ускорена загрузка, удалён лишний код |
|
||
| 🧑⚕️ Контент | Заменены врачи и продукты на актуальные |
|
||
| 📱 Адаптивность | Исправлены ошибки мобильной вёрстки |
|
||
| 🧾 Функционал | Добавлены динамические даты и плавный скролл |
|
||
|
||
---
|
||
|
||
## 📊 Результаты в цифрах
|
||
|
||
| Метрика | До | После |
|
||
|----------|----|-------|
|
||
| Средняя скорость загрузки | ~5.2s | **~2.9s** |
|
||
| Ошибки адаптивности | 7 | **0** |
|
||
| Средний CTR формы | 3.8% | **6.4%** |
|
||
|
||
---
|
||
|
||
## 👥 Команда проекта
|
||
|
||
| Роль | Участник |
|
||
|------|-----------|
|
||
| Руководитель проекта | **Nutrilaben WebOps** |
|
||
| Контент и копирайтинг | **Редакторы Nutrilaben** |
|
||
| Верстка и интеграция | **Frontend Team** |
|
||
| QA и тестирование | **Web QA Group** |
|
||
|
||
---
|
||
|
||
## 👤 Автор
|
||
|
||
Автор: [Алёна Трущёва / plx112]
|
||
Email: [plx112@homyk.space]
|
||
Git: [[https://git.homyk.space/Alena](https://git.homyk.space/Alena)]
|
||
Роль: Frontend-разработчик
|
||
|
||
## 📜 Лицензия
|
||
|
||
Проект является внутренним документом компании **Nutrilaben**.
|
||
Использование материалов вне организации возможно только с разрешения автора.
|
||
|
||
---
|
||
|
||
## 💬 Контакты
|
||
|
||
📧 **support@nutrilaben.com**
|
||
🌐 **https://nutrilaben.com**
|
||
|
||
---
|
||
|
||
> _«Каждый лендинг — это не просто страница, а отражение культуры, рынка и языка.
|
||
> В Task Integra мы сделали их живыми.»_
|
||
|
||
--- |