first commit
This commit is contained in:
193
README.md
Normal file
193
README.md
Normal file
@@ -0,0 +1,193 @@
|
|||||||
|
# 🛰️ 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 мы сделали их живыми.»_
|
||||||
|
|
||||||
|
---
|
||||||
Reference in New Issue
Block a user