Доработка сайта Caribico (EN / ES): логин, формы, контакты, UI

Caribico Website – Итоговое техническое задание (RU)

1. ОБЩИЕ ПРИНЦИПЫ
• Английская версия (EN) является основной (master).
• Все страницы должны использовать единую визуальную систему: типографика, сетка, отступы, логика поведения.
• Испанская версия (ES) – полное зеркальное отражение EN:
• та же структура,
• та же логика,
• тот же дизайн,
• меняется только язык.
• Не допускается:
• разные логики между версиями,
• разные размеры шрифтов,
• визуальное ухудшение ES по сравнению с EN.

2. ГЛАВНАЯ СТРАНИЦА = LOGIN PAGE

2.1 Назначение страницы
• Главная страница сайта = Login Page.
• URL: / (дополнительно может существовать /login).
• При открытии сайта пользователь сразу видит два логин-блока.

2.2 Структура логин-блоков

ЛЕВЫЙ БЛОК – STATIC RATES (АКТИВНЫЙ)

Заголовок: STATIC RATES

Поля:
• Code *
• Login *
• Password *

Кнопка: LOGIN

Поведение:
• Полностью подключён к существующему скрипту авторизации.
• Логика входа не изменяется.
• Проверка обязательных полей перед отправкой.

Ссылка под формой:
• Текст: Don't have a login? Send us a request.
• Ссылка ведёт на страницу Login Request.

ПРАВЫЙ БЛОК – DYNAMIC RATES (ЗАГЛУШКА)

Заголовок: DYNAMIC RATES

Поля:
• Login
• Password

Кнопка: ENTER

Поведение (КРИТИЧНО):
• Блок является визуальной и структурной заглушкой.
• API НЕ подключается.
• При нажатии:
• либо отображается текст Coming soon,
• либо кнопка неактивна с подсказкой Coming soon.
• Никаких запросов, редиректов и серверных вызовов.

Ссылка под формой:
• Don't have a login? Send us a request.
• Поведение идентично левому блоку.

2.3 Адаптивность и визуал
• Desktop: два блока в одну строку, равная ширина.
• Mobile: вертикально, сначала Static, затем Dynamic.
• Одинаковый стиль рамок, шрифтов, отступов.

3. СТРАНИЦА LOGIN REQUEST

3.1 Доступ
• Открывается по ссылке Send us a request.
• Отдельный маршрут (например /login-request).

3.2 Поля формы

Компания:
• Company name *
• Web address *

Адрес:
• Country *
• City *
• Street
• ZIP code

Контактное лицо:
• First name *
• Last name *
• Email address *
• Job title

* – обязательные поля.

3.3 Валидация и UX
• Проверка заполнения обязательных полей.
• Проверка формата email.
• Кнопка блокируется на время отправки.

Успешная отправка:
Thank you! Your request has been sent. We will contact you shortly.

Ошибка:
Error sending request. Please try again later.

3.4 Отправка письма
• После отправки формы письмо уходит на:
info@caribico.net

Тема письма:
Caribico – Login request: [Company name]

Тело письма:
• Все поля формы
• Дата и время отправки

3.5 Технические требования
• Отправка email только с сервера.
• Минимальная антиспам-защита (rate limit / honeypot).

4. СТРАНИЦА CONTACTS

4.1 Структура
• Два контактных блока.
• США слева, Мексика справа.

4.2 Контакты USA (ЛЕВЫЙ БЛОК)

Заголовок: USA
• Телефон: +1 (224) 566 7200
• Email: info@caribico.net
• Адрес:

1209 Mountain Road Pl NE, Ste R
Albuquerque, NM 87110
USA

4.3 Контакты Mexico (ПРАВЫЙ БЛОК)

Заголовок: Mexico
• Телефон: +52 998 370 0047
• Email: info@caribico.net
• Адрес:

Av. De La Luna
Residencia California 33, Oficina 101 SM 46
Cancún, Quintana Roo
C.P. 77506
México

⸻

4.4 Адаптивность
• Desktop: USA | Mexico в одну строку.
• Mobile: сначала USA, затем Mexico.
• Единый стиль и иконки.

5. СТРАНИЦА ABOUT US

5.1 Проблема
• Правая колонка визуально слабее.
• Текст справа слишком мелкий.

5.2 Требование
• Увеличить шрифты справа.
• Привести типографику в единый баланс.

5.3 Правила типографики
• Заголовок страницы ABOUT US – без изменений.
• Заголовки секций (Caribico, Our Team, Information Technology):
• одинаковый размер и насыщенность.
• Основной текст:
• справа = слева по размеру и читаемости.
• ориентир: 15-16px, line-height 1.6-1.7.

5.4 Ограничения
• Не менять фон, сетку, структуру блоков.
• Не допускать переполнения и поломки адаптива.

6. ЯЗЫКОВЫЕ ВЕРСИИ

6.1 Английская версия (EN)
• Основная и эталонная.
• Все изменения сначала внедряются здесь.

6.2 Испанская версия (ES)
• Полное зеркальное отражение EN.
• Та же логика, структура, размеры.
• Меняется только язык.

Запрещено:
• смешение языков,
• самостоятельные правки дизайна,
• отклонения от EN.

7. ЧЕК-ЛИСТ ПРИЁМКИ
• На главной странице 2 логин-блока.
• Static Rates работает по старой логике.
• Dynamic Rates – заглушка.
• Форма Login Request отправляет письмо.
• Контакты USA и Mexico отображаются корректно.
• Шрифты About Us выровнены.
• EN и ES версии идентичны по структуре.